/* =========================================================================
   THE DR. LAZAR SHOW — Design Tokens
   colors · type · spacing · radius · shadow · motion
   ========================================================================= */

/* --- Webfonts (Google Fonts substitutes — flagged for replacement) ------- */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---------- COLOR — base ----------------------------------------------- */
  --ink:        #0E0E10;   /* warm near-black — default background */
  --ink-2:      #1B1B1F;   /* steel — card surface on dark */
  --ink-3:      #2A2A2F;   /* smoke — borders/dividers on dark */
  --ink-4:      #3A3A40;   /* smoke-light — hover borders on dark */

  --bone:       #F4EFE6;   /* off-white — default fg on dark, alt bg on light */
  --bone-2:     #E8E1D3;   /* paper — alternate light surface */
  --bone-3:     #D6CFBE;   /* aged paper — light borders */

  /* Cover-art-only colors. The published podcast cover uses warm amber
     and gold. They are LOCKED to the cover artwork and must NOT appear in
     web/UI surfaces. New buttons, pills, eyebrows, links use bone + teal
     + oxblood instead (see semantic accent block below). */
  --amber:      #E89A2D;   /* cover-art only — do not use in UI */
  --amber-2:    #F2A93D;   /* cover-art only */
  --amber-3:    #C77F1C;   /* cover-art only */
  --gold:       #C8A24B;   /* cover-art only — book lockup ink */
  --gold-2:     #D9B768;   /* cover-art only */

  --teal:       #1B5E7A;   /* secondary accent — clinical, trustworthy */
  --teal-2:     #2A7593;   /* hover */
  --teal-3:     #134558;   /* press / deep */

  --oxblood:    #B11E2A;   /* tertiary — "LIVE" / urgent moments only */
  --oxblood-2:  #C8262F;
  --oxblood-3:  #8C1620;

  /* ---------- COLOR — semantic (foreground) ------------------------------ */
  --fg-1:       var(--bone);          /* primary text on dark */
  --fg-2:       #A6A19A;              /* secondary text on dark — warm gray */
  --fg-3:       #7A7670;              /* tertiary on dark */
  --fg-inv-1:   var(--ink);           /* primary text on light */
  --fg-inv-2:   #4A4742;              /* secondary on light */
  --fg-inv-3:   #6E6A63;              /* tertiary on light */

  /* ---------- COLOR — semantic (background) ------------------------------ */
  --bg-1:       var(--ink);
  --bg-2:       var(--ink-2);
  --bg-inv-1:   var(--bone);
  --bg-inv-2:   var(--bone-2);

  /* ---------- COLOR — semantic (accent) ----------------------------------
     Primary accent is BONE on dark, INK on light — a high-contrast
     monochrome system. This is the doctor-credible move: editorial,
     not talk-radio. Teal is the supporting small-area accent.
     ---------------------------------------------------------------------- */
  --accent:        var(--bone);
  --accent-hover:  #FFFFFF;
  --accent-press:  var(--bone-2);
  --accent-fg:     var(--ink);        /* text on bone — dark for contrast */

  --accent-2:      var(--teal);       /* small-area accent: eyebrows, links, kickers */
  --accent-2-hover:var(--teal-2);
  --accent-2-press:var(--teal-3);
  --accent-2-fg:   var(--bone);       /* text on teal — bone for contrast */

  --premium:       var(--bone);       /* book/premium uses bone outline + ink fill */
  --premium-fg:    var(--ink);

  /* ---------- COLOR — semantic (line) ------------------------------------ */
  --line-1:     var(--ink-3);                         /* hairline on dark */
  --line-2:     var(--ink-4);                         /* hover hairline on dark */
  --line-inv-1: rgba(14,14,16,0.10);                  /* hairline on light */
  --line-inv-2: rgba(14,14,16,0.18);

  /* ---------- COLOR — status (sparing) ----------------------------------- */
  --live:       var(--oxblood);     /* "LIVE" indicator dot */
  --ok:         #6BAA64;
  --warn:       #D7A23A;
  --err:        #C2362F;

  /* ---------- TYPE — families -------------------------------------------- */
  --font-display: 'Anton', 'Bebas Neue', 'Oswald', 'Impact', sans-serif;
  --font-serif:   'Fraunces', 'Tiempos', 'Caslon', Georgia, serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* ---------- TYPE — base scale (rem-based, 16 root) --------------------- */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-64: 4rem;
  --fs-80: 5rem;
  --fs-96: 6rem;
  --fs-128: 8rem;
  --fs-160: 10rem;

  /* ---------- TYPE — line height ----------------------------------------- */
  --lh-tight:   1.02;   /* display */
  --lh-snug:    1.12;   /* headlines */
  --lh-normal:  1.45;   /* body */
  --lh-relaxed: 1.65;   /* long-form reading */

  /* ---------- TYPE — letter spacing -------------------------------------- */
  --ls-display:   -0.02em;   /* condensed display, tight */
  --ls-headline:  -0.012em;  /* serif headline, slightly tight */
  --ls-body:      0em;
  --ls-eyebrow:   0.18em;    /* small caps eyebrow */
  --ls-label:     0.06em;    /* button / label */

  /* ---------- SPACING (4pt grid) ----------------------------------------- */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;
  --s-10:  128px;

  /* ---------- RADIUS ----------------------------------------------------- */
  --r-0:    0;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-pill: 999px;

  /* ---------- SHADOW (light surfaces only) ------------------------------- */
  --shadow-sm: 0 1px 2px rgba(14,14,16,.08);
  --shadow-md: 0 8px 24px -8px rgba(14,14,16,.18);
  --shadow-lg: 0 32px 64px -24px rgba(14,14,16,.30);

  /* ---------- MOTION ----------------------------------------------------- */
  --ease-standard:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-emphasis:  cubic-bezier(0.65, 0, 0.35, 1);
  --t-micro:    120ms;
  --t-standard: 220ms;
  --t-emphasis: 420ms;

  /* ---------- LAYOUT ----------------------------------------------------- */
  --container:    1200px;
  --container-narrow: 720px;
  --reading-max:  680px;
}

/* =========================================================================
   SEMANTIC TYPE STYLES
   Apply these classes (or copy the rule body) wherever you need the style.
   ========================================================================= */

.t-display, h1.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(var(--fs-64), 11vw, var(--fs-160));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--fg-1);
}

.t-h1, h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(var(--fs-36), 5vw, var(--fs-80));
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-headline);
  color: var(--fg-1);
  text-wrap: pretty;
}

.t-h2, h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(var(--fs-30), 3.4vw, var(--fs-48));
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-headline);
  color: var(--fg-1);
  text-wrap: pretty;
}

.t-h3, h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-24);
  line-height: 1.2;
  color: var(--fg-1);
}

.t-h4, h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-18);
  line-height: 1.3;
  color: var(--fg-1);
}

.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-12);
  line-height: 1;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent-2);
}

.t-kicker {
  font-family: var(--font-display);
  font-size: var(--fs-14);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}

.t-quote, blockquote {
  font-family: var(--font-serif);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(var(--fs-24), 3vw, var(--fs-48));
  line-height: 1.25;
  color: var(--fg-1);
  text-wrap: pretty;
}

.t-body, p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
  text-wrap: pretty;
}

.t-body-lg {
  font-family: var(--font-sans);
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
}

.t-body-sm, small {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.t-caption {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-12);
  line-height: 1.4;
  color: var(--fg-3);
}

.t-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-13);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-1);
}

.t-mono, code {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  letter-spacing: 0;
  color: var(--fg-1);
}

.t-stat {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(var(--fs-80), 14vw, var(--fs-160));
  line-height: 0.9;
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
}

/* =========================================================================
   PRIMITIVE COMPONENT STYLES (used across UI kits and slides)
   ========================================================================= */

.surface-ink   { background: var(--bg-1); color: var(--fg-1); }
.surface-bone  { background: var(--bg-inv-1); color: var(--fg-inv-1); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 14px 22px;
  border: 0;
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-15);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--t-micro) var(--ease-standard),
              color var(--t-micro) var(--ease-standard),
              transform var(--t-micro) var(--ease-standard);
  text-decoration: none;
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-fg);
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-press); transform: translateY(1px); }

.btn-bone {
  background: var(--bone);
  color: var(--ink);
}
.btn-bone:hover { background: #FFFFFF; }
.btn-bone:active { transform: translateY(1px); }

.btn-teal {
  background: var(--accent-2);
  color: var(--accent-2-fg);
}
.btn-teal:hover { background: var(--accent-2-hover); }
.btn-teal:active { background: var(--accent-2-press); transform: translateY(1px); }

.btn-oxblood {
  background: var(--oxblood);
  color: var(--bone);
}
.btn-oxblood:hover { background: var(--oxblood-2); }
.btn-oxblood:active { background: var(--oxblood-3); transform: translateY(1px); }

.btn-ghost {
  background: transparent;
  color: var(--fg-1);
  border: 1px solid var(--line-1);
}
.btn-ghost:hover { border-color: var(--bone); background: rgba(244,239,230,0.04); }
.btn-ghost:active { transform: translateY(1px); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--accent-2);
  color: var(--accent-2);
  background: transparent;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-12);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--oxblood);
  box-shadow: 0 0 0 0 rgba(177,30,42,0.6);
  animation: pulse 1.6s var(--ease-standard) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(177,30,42,0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(177,30,42,0); }
  100% { box-shadow: 0 0 0 0 rgba(177,30,42,0); }
}

.card {
  background: var(--ink-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--t-standard) var(--ease-standard);
}
.card:hover { border-color: var(--line-2); }
.card .cover { overflow: hidden; }
.card .cover img {
  width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover;
  transition: transform var(--t-emphasis) var(--ease-standard);
}
.card:hover .cover img { transform: scale(1.02); }

.hairline { border: 0; border-top: 1px solid var(--line-1); }