/* ============================================================================
 * The Lark Davis Show — Colors & Type
 * Single drop-in for design work. Heirloom Slate is the default register;
 * other themes live in palette/all_themes.json.
 * ========================================================================= */

/* -------- Fonts (self-hosted, brand-owned) -------- */
/* All families are local TTFs in /fonts. No CDN, no Google fetch. */

@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-VariableFont.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-Italic-VariableFont.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Nunito Sans';
  src: url('fonts/NunitoSans-VariableFont.ttf') format('truetype-variations');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('fonts/NunitoSans-Italic-VariableFont.ttf') format('truetype-variations');
  font-weight: 200 1000;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Anton';
  src: url('fonts/Anton-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/IBMPlexMono-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/IBMPlexMono-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ====== Color — Heirloom Slate (default theme) ====== */
  --bg:           #1d2832;   /* page substrate — calm, slightly cool slate */
  --surface:      #27343f;   /* cards, modals, raised panels */
  --surface-2:    #324252;   /* second-tier raise */

  --accent:       #5a82a0;   /* trust-blue — headlines, links, focus, CTAs */
  --accent-glow:  rgba(90, 130, 160, 0.22);
  --amber:        #c89942;   /* heritage gold — episode numbers, eyebrows, seals */

  --text:         #eef2f6;   /* primary headline + body */
  --text-dim:     #a8b8c8;   /* captions, metadata */
  --text-muted:   #6e8298;   /* tertiary copy, footers */

  --border:       #3a4a5a;   /* hairline rules */

  /* Semantic — warm-ramp, never neon */
  --red:          #d4884a;   /* down / loss — warm rust, NOT hospital red */
  --green:        #7aa088;   /* up / gain — muted fern, NOT neon green */

  /* ====== Type — families ====== */
  --font-display-editorial: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-display-block:     'Anton', 'Nunito Sans', sans-serif;
  --font-sans:              'Nunito Sans', system-ui, -apple-system, sans-serif;
  --font-mono:              'IBM Plex Mono', ui-monospace, monospace;

  /* ====== Type — semantic scale (web register) ====== */
  /* Display — magazine cover energy. Use sparingly. */
  --type-hero-size:        clamp(56px, 9vw, 132px);
  --type-hero-line:        0.94;
  --type-hero-tracking:    -0.018em;
  --type-hero-family:      var(--font-display-editorial);
  --type-hero-weight:      700;

  /* H1 — section opener */
  --type-h1-size:          clamp(40px, 5vw, 72px);
  --type-h1-line:          1.02;
  --type-h1-tracking:      -0.012em;
  --type-h1-family:        var(--font-display-editorial);
  --type-h1-weight:        600;

  /* H2 — sub-section */
  --type-h2-size:          clamp(28px, 3vw, 44px);
  --type-h2-line:          1.12;
  --type-h2-tracking:      -0.008em;
  --type-h2-family:        var(--font-display-editorial);
  --type-h2-weight:        600;

  /* H3 — block headline */
  --type-h3-size:          22px;
  --type-h3-line:          1.25;
  --type-h3-tracking:      -0.004em;
  --type-h3-family:        var(--font-sans);
  --type-h3-weight:        700;

  /* Eyebrow — the editorial wayfinder. Always uppercase, tracked, amber. */
  --type-eyebrow-size:     12px;
  --type-eyebrow-line:     1.3;
  --type-eyebrow-tracking: 0.32em;
  --type-eyebrow-family:   var(--font-sans);
  --type-eyebrow-weight:   700;

  /* Block display — Anton. ONLY for thumbnails / ticker punch. NOT body. */
  --type-block-size:       clamp(48px, 8vw, 120px);
  --type-block-line:       0.92;
  --type-block-tracking:   0.005em;
  --type-block-family:     var(--font-display-block);
  --type-block-weight:     400;

  /* Body */
  --type-body-size:        17px;
  --type-body-line:        1.55;
  --type-body-tracking:    0;
  --type-body-family:      var(--font-sans);
  --type-body-weight:      400;

  --type-body-lg-size:     20px;
  --type-body-lg-line:     1.5;

  --type-body-sm-size:     15px;
  --type-body-sm-line:     1.5;

  /* Meta — captions, byline, dateline */
  --type-meta-size:        13px;
  --type-meta-line:        1.45;
  --type-meta-tracking:    0.04em;
  --type-meta-family:      var(--font-sans);
  --type-meta-weight:      600;

  /* Mono — tickers, data labels */
  --type-mono-size:        14px;
  --type-mono-line:        1.4;
  --type-mono-tracking:    0.06em;
  --type-mono-family:      var(--font-mono);
  --type-mono-weight:      500;

  /* Pulled quote — italic Fraunces */
  --type-quote-size:       clamp(28px, 3.4vw, 48px);
  --type-quote-line:       1.25;
  --type-quote-family:     var(--font-display-editorial);
  --type-quote-style:      italic;
  --type-quote-weight:     400;

  /* ====== Spacing — 4px base ====== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ====== Radii — restrained. Editorial ≠ rounded. ====== */
  --radius-0:  0;
  --radius-1:  2px;   /* hairline-tag, pill chips */
  --radius-2:  4px;   /* cards, inputs */
  --radius-3:  8px;   /* modals */
  --radius-pill: 999px;

  /* ====== Borders — hairlines do the work ====== */
  --border-hair: 1px solid var(--border);
  --border-rule: 1px solid var(--accent);

  /* ====== Shadows — atmospheric, never decorative ====== */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.20);
  --shadow-2: 0 4px 18px rgba(0,0,0,0.30);
  --shadow-3: 0 12px 48px rgba(0,0,0,0.45);
  --shadow-text: 0 4px 24px rgba(0,0,0,0.55);

  /* ====== Motion ====== */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.5, 0, 0.2, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;
}

/* ============================================================================
 * Element defaults — assume a parent sets a font and color.
 * ========================================================================= */
html {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { background: var(--bg); color: var(--text); }

h1 {
  font-family: var(--type-h1-family);
  font-weight: var(--type-h1-weight);
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-line);
  letter-spacing: var(--type-h1-tracking);
  color: var(--text);
  margin: 0;
  text-wrap: pretty;
}
h2 {
  font-family: var(--type-h2-family);
  font-weight: var(--type-h2-weight);
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-line);
  letter-spacing: var(--type-h2-tracking);
  color: var(--text);
  margin: 0;
  text-wrap: pretty;
}
h3 {
  font-family: var(--type-h3-family);
  font-weight: var(--type-h3-weight);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line);
  letter-spacing: var(--type-h3-tracking);
  color: var(--text);
  margin: 0;
}
p {
  font-family: var(--type-body-family);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  color: var(--text-dim);
  margin: 0;
  text-wrap: pretty;
}
small, .meta {
  font-size: var(--type-meta-size);
  line-height: var(--type-meta-line);
  letter-spacing: var(--type-meta-tracking);
  color: var(--text-muted);
}
code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: var(--type-mono-size);
  letter-spacing: var(--type-mono-tracking);
  color: var(--text-dim);
}
a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--text); }

/* Editorial classes — handy primitives */
.eyebrow {
  font-family: var(--type-eyebrow-family);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-tracking);
  line-height: var(--type-eyebrow-line);
  text-transform: uppercase;
  color: var(--amber);
}
.eyebrow-blue { color: var(--accent); }

.hero-display {
  font-family: var(--type-hero-family);
  font-weight: var(--type-hero-weight);
  font-size: var(--type-hero-size);
  line-height: var(--type-hero-line);
  letter-spacing: var(--type-hero-tracking);
  color: var(--text);
}

.block-display {
  font-family: var(--type-block-family);
  font-weight: var(--type-block-weight);
  font-size: var(--type-block-size);
  line-height: var(--type-block-line);
  letter-spacing: var(--type-block-tracking);
  text-transform: uppercase;
  color: var(--amber);
}

.pulled-quote {
  font-family: var(--type-quote-family);
  font-style: var(--type-quote-style);
  font-weight: var(--type-quote-weight);
  font-size: var(--type-quote-size);
  line-height: var(--type-quote-line);
  color: var(--text);
}

.rule-accent {
  display: block;
  width: 56px;
  height: 2px;
  background: var(--accent);
  border: 0;
}

.hairline {
  height: 1px;
  background: var(--border);
  border: 0;
}

/* Tabular numbers wherever numbers carry meaning */
.tabular { font-variant-numeric: tabular-nums; }