/* ============================================================
   thedoctorteacher.com — design tokens
   System derived from the 11x.ai editorial model (refero.design),
   colored with Pablo's own 7 cheat-sheet palette (BRAND-COLORS.md).
   ============================================================ */

:root {
  /* ============================================================
     DARK-FIRST — the Oryzo model. Warm espresso ground, cream ink.
     Measured from oryzo.ai: ground rgb(16,9,4), ink rgb(255,237,215),
     accent rgb(220,80,0). Pablo's Cream #F1E7CE and Orange #A8421D
     are already in the same family, so this inverts the page without
     fighting the brand.
     ============================================================ */

  /* ============================================================
     PALETTE DERIVED FROM THE ENVIRONMENT.

     Measured by quantizing the hero frames and ranking by coverage.

     ACT 1 — classroom (act1-v2a.png, the approved frame):
       73% warm · hues clustered 29–35° · mean luminance 22%
       lightest large area #d0b99d · darkest #090602
     ACT 2 — operating room (act2-or-b.png):
       0% warm · hues clustered 175–182° · mean luminance 36%
       range #0b0f0f → #a9d9da

     The two acts are near-complementary (30° vs 180°), so the scroll
     transition between them is a real colour event, not decoration.

     HONESTY NOTE: the page ground (--ground) is EXTRAPOLATED, not
     measured. Act 1 is a moody frame whose lightest large area is
     #d0b99d (72% lum); a page needs a ground lighter than anything
     in the photo. So --ground takes Act 1's hue (33°) and saturation
     (35%) and raises lightness to ~96%. Everything else below is a
     direct sample.
     ============================================================ */

  /* ---- Ground: window light ---- */
  --ground:         #f8f4ec;  /* window light — the page canvas */
  --ground-lift:    #e5ddc9;  /* chalk dust — cards, wells */
  --ground-lift-2:  #d4c7ac;  /* oat — alternating sections */
  --hairline:       rgba(47, 42, 27, 0.18);

  /* ---- Ink: the chalkboard ---- */
  --ink:            #2f2a1b;  /* slate — body copy */
  --ink-bright:     #121712;  /* chalkboard — headlines */
  --ink-dim:        #6f664b;  /* muted oak-grey — secondary */
  --ink-faint:      #a99876;  /* labels, gutter specs */

  /* ---- Wood: the accents ---- */
  --oak:            #b8915e;  /* rules, active states */
  --desk:           #926a3f;  /* secondary accent */
  --burnt:          #623713;  /* CTA fills, links */

  /* ---- Act 2 — the operating room. Sampled from act2-or-b.png.
          Cool teal is a MOMENT in the story, never the site identity.
          (Distinct from SpineCal blue #3F59C6 at hue 228° — this is 180°.) ---- */
  --or-deep:        #0b0f0f;  /* darkest — type field on the OR frame */
  --or-shadow:      #1b2d2d;  /* dominant wall shadow */
  --or-mid:         #427c7c;
  --or-light:       #73b9bb;  /* lit wall */
  --or-glow:        #a9d9da;  /* brightest — surgical light bounce */

  /* ---- Dark bands — hero + act sections, always under photography ---- */
  --band:           #121712;  /* chalkboard green-black */
  --band-lift:      #2f2a1b;
  --on-band:        #e5ddc9;  /* chalk dust — text on the board */
  --on-band-bright: #f8f4ec;  /* window light — headlines on the board */
  --on-band-dim:    rgba(229, 221, 201, 0.66);
  --on-band-faint:  rgba(229, 221, 201, 0.38);
  --hairline-band:  rgba(229, 221, 201, 0.18);

  /* ---- Warm mid-tones (Oryzo's connective tissue) ---- */
  --taupe:          #bbac97;
  --umber:          #6c5f51;
  --cocoa:          #382416;

  /* ---- Signature accent ---- */
  --accent:         #c0450f;  /* burnt orange, between Oryzo's #DC5000
                                 and Pablo's #A8421D — his family, Oryzo's heat */
  --accent-soft:    #ad6449;  /* Pablo's Orange bg — hover/secondary */

  /* ---- THE GUIDE PALETTE — the 7 cheat sheets ARE the site palette.
          These now GLOW against the dark ground. ---- */
  --mint:           #bfe3ce;  /* 1. 15-Minute Appointment */
  --light-blue:     #a9cce6;  /* 2. In The Room */
  --peach:          #f2c4a0;  /* 3. Bring Everything */
  --yellow:         #f6e9ae;  /* 4. Quitting Sugar */
  --blush:          #efafcb;  /* 5. Spine Red Flags */
  --teal:           #93c9c7;  /* 6. Magnesium */
  --cream:          #f1e7ce;  /* 7. Back Exercises */

  /* matching dark offsets, for text/rules inside each colored card */
  --mint-ink:       #1f6e4e;
  --light-blue-ink: #234e79;
  --peach-ink:      #b5532a;
  --yellow-ink:     #97710e;
  --blush-ink:      #8e1f3a;
  --teal-ink:       #0f5c5c;
  --cream-ink:      #5c4128;

  /* ---- Type ---- */
  /* Option C (locked): serif tells the story, sans runs the machinery.
     Serif  → hero, section heads, guide titles, pull quotes, body prose.
     Sans   → nav, gutter specs (ACT 01 …), buttons, labels, percentages, captions.
     Serif goes mushy below ~14px; sans stays crisp. That's the split. */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    var(--font-display);
  --font-chrome:  'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  /* Minor Third (1.2) from a 16px base.
     TRACKING CORRECTED: the original -0.045em was lifted from 11x (ES Allianz)
     and Oryzo (a geometric sans). Fraunces is a warmer serif with wider natural
     fitting — at that tracking its counters close and the letters collide, which
     is exactly what Pablo flagged as hard to read. Display sizes now sit near
     -0.015em, which keeps the editorial stance without crushing the letterforms.
     Leading also opened at display sizes so serif ascenders and descenders on
     adjacent lines stop touching. */
  --text-display-xl: 152px;  --leading-display-xl: 0.98;  --tracking-display-xl: -0.015em;
  --text-display:     74px;  --leading-display:    1.04;  --tracking-display:    -0.015em;
  --text-heading-lg:  64px;  --leading-heading-lg: 1.12;  --tracking-heading-lg: -0.012em;
  --text-heading:     46px;  --leading-heading:    1.14;  --tracking-heading:    -0.01em;
  --text-heading-sm:  28px;  --leading-heading-sm: 1.25;  --tracking-heading-sm: -0.005em;
  --text-subheading:  19px;  --leading-subheading: 1.45;  --tracking-subheading: 0;
  --text-body:        16px;  --leading-body:       1.55;  --tracking-body:       0;
  --text-caption:     14px;  --leading-caption:    1.4;   --tracking-caption:    0.005em;

  /* ---- Space ---- */
  --unit: 8px;
  --space-1:  8px;   --space-2: 16px;  --space-3: 24px;  --space-4: 32px;
  --space-5: 40px;   --space-6: 48px;  --space-8: 64px;  --space-9: 72px;
  --space-10: 80px;  --space-16: 128px; --space-24: 192px;

  --page-max:    1200px;
  --gutter:      24px;
  --section-gap: 80px;

  /* ---- Shape ---- */
  --radius-badge:   8px;
  --radius-card:    16px;
  --radius-portrait: 32px;
  --radius-pill:    999px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 640ms;
}

/* ============================================================
   VIEWPORT TIERS — phone through television.
   The page is read at arm's length on a phone, at desk distance on a laptop,
   and from a sofa on a TV. Capping at 1200px looks composed on a laptop and
   becomes a postage stamp on a 4K panel, so the container and the type scale
   both step up on large screens rather than stranding content in the middle.
   ============================================================ */

/* Mobile-first: step the display sizes down. All four reference sites
   break at 390px — headline/image collisions. We don't. */
@media (max-width: 767px) {
  :root {
    --text-display-xl: 56px;
    --text-display:    40px;
    --text-heading-lg: 34px;
    --text-heading:    28px;
    --text-heading-sm: 22px;
    --section-gap:     48px;
    --gutter:          20px;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  :root {
    --text-display-xl: 96px;
    --text-display:    56px;
    --text-heading-lg: 46px;
    --text-heading:    36px;
    --section-gap:     64px;
  }
}

/* ---- Large desktop ---- */
@media (min-width: 1600px) {
  :root {
    --page-max:        1520px;
    --gutter:          40px;
    --text-display-xl: 136px;
    --text-display:    92px;
    --text-heading-lg: 78px;
    --text-heading:    56px;
    --text-heading-sm: 34px;
    --text-subheading: 22px;
    --text-body:       18px;
    --text-caption:    15px;
    --section-gap:     104px;
  }
}

/* ---- Television / very large panels ----
   Read from several metres away, so everything grows: container, type, and the
   interface chrome. Also widened tap and focus targets, because a TV is driven
   by a remote rather than a cursor. */
@media (min-width: 2200px) {
  :root {
    --page-max:        1960px;
    --gutter:          64px;
    --text-display-xl: 200px;
    --text-display:    132px;
    --text-heading-lg: 104px;
    --text-heading:    76px;
    --text-heading-sm: 46px;
    --text-subheading: 30px;
    --text-body:       24px;
    --text-caption:    19px;
    --section-gap:     150px;
    --radius-card:     22px;
  }
}

@media (min-width: 3000px) {
  :root {
    --page-max:        2560px;
    --gutter:          88px;
    --text-display-xl: 268px;
    --text-display:    172px;
    --text-heading-lg: 136px;
    --text-heading:    98px;
    --text-heading-sm: 58px;
    --text-subheading: 38px;
    --text-body:       30px;
    --text-caption:    24px;
    --section-gap:     190px;
  }
}

/* Respect the user. Hero frame-scrub degrades to static stills with cross-fades. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}