/* ============================================================
   TOKENS — the only file you need for a visual reskin.

   Design language: dark, cinematic, oversized display type.
   Serif display (DM Serif Display) against a light-weight
   grotesque (Roboto), with one full-section colour inversion.
   ============================================================ */

:root {
  /* ---------- Typeface ---------- */
  --font-display: "DM Serif Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Fluid type ----------
     The reference sets the root to 1vw so every `em` scales with the
     viewport. We clamp it instead: same fluid feel, but the text still
     respects the visitor's browser font-size setting and never collapses
     to 12px on a laptop or balloon on an ultrawide. */
  --fs-hero:    clamp(2.75rem, min(14vw, 19vh), 15rem);
  --fs-display: clamp(2.5rem, 8vw, 7.5rem);
  --fs-statement: clamp(1.5rem, 4vw, 4rem);
  --fs-4xl:  clamp(2rem, 4.4vw, 3.5rem);
  --fs-3xl:  clamp(1.6rem, 3vw, 2.5rem);
  --fs-2xl:  clamp(1.35rem, 2.1vw, 1.85rem);
  --fs-xl:   clamp(1.15rem, 1.5vw, 1.4rem);
  --fs-lg:   clamp(1.05rem, 1.15vw, 1.2rem);
  --fs-base: 1rem;
  --fs-sm:   0.875rem;
  --fs-xs:   0.8125rem;
  --fs-micro: 0.6875rem;

  --lh-tight: 0.94;
  --lh-snug: 1.15;
  --lh-normal: 1.4;
  --lh-relaxed: 1.62;

  --tracking-hero: 0.01em;
  --tracking-eyebrow: 0.18em;
  --tracking-label: 0.1em;
  --tracking-tight: -0.015em;

  /* ---------- Spacing ---------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem;  --sp-6: 1.5rem;   --sp-7: 2rem;     --sp-8: 2.5rem;
  --sp-9: 3rem;     --sp-10: 4rem;    --sp-11: 5rem;    --sp-12: 7rem;

  /* Reference uses 10em top/bottom — generous, cinematic breathing room. */
  --section-y: clamp(5rem, 10vw, 10rem);
  --shell-max: 1700px;
  --shell-pad: clamp(1.5rem, 5vw, 4rem);
  --measure: 62ch;
  --header-h: 76px;

  /* ---------- Radius — near-square, editorial ---------- */
  --r-xs: 2px; --r-sm: 3px; --r-md: 4px; --r-lg: 6px; --r-xl: 8px; --r-pill: 999px;

  /* ---------- Motion ---------- */
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;
  --dur-cinematic: 900ms;
  --ease-out: cubic-bezier(0.16, 0.84, 0.34, 1);
  --ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.52, 1);

  /* ---------- Z-index ---------- */
  --z-base: 0; --z-raised: 10; --z-sticky: 40; --z-drawer: 80; --z-header: 100; --z-toast: 1000;
}

/* ============================================================
   DARK — the default. This is the reference look.
   ============================================================ */
:root,
[data-theme="dark"] {
  --bg:            #0B0B0B;   /* --black    */
  --bg-alt:        #141414;   /* --charcoal */
  --surface:       #161616;
  --surface-sunk:  #101010;

  --ink:           #FFFFFF;
  --ink-body:      #D8D8D8;   /* 14.4:1 */
  --ink-muted:     #9C9C9C;   /*  7.2:1 */
  --ink-faint:     #FFFFFF0F;

  --line:          #242424;
  --line-strong:   #3A3A3A;

  --accent:        #2787A5;   /* steel blue — fills, rules, large shapes */
  --accent-bright: #5FB9D6;   /* text-safe on black, 8.8:1 */
  --accent-wash:   #12262D;
  --accent-warm:   #7E3A3B;   /* the reference red — decorative only */
  --accent-warm-text: #5FB9D6;

  --on-accent:     #061014;
  --focus:         #7FD1EC;

  --success:       #6FCB9F;
  --danger:        #E4867A;

  --scrim:         rgb(0 0 0 / 0.72);
  --header-bg:     rgb(11 11 11 / 0.78);

  /* The inverted section (About) flips to light. */
  --invert-bg:     #FFFFFF;
  --invert-ink:    #0B0B0B;
  --invert-body:   #3A3A3A;
  --invert-muted:  #6B6B6B;
  --invert-line:   #E2E2E2;
  --invert-accent: #1D6E88;
  --invert-warm:   #7E3A3B;   /* the reference red, 8.2:1 on white */

  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-2: 0 6px 20px -6px rgb(0 0 0 / 0.6);
  --shadow-3: 0 24px 60px -24px rgb(0 0 0 / 0.85), 0 8px 20px -10px rgb(0 0 0 / 0.5);
}

/* ============================================================
   LIGHT — a coherent inversion, not a wash-out.
   ============================================================ */
[data-theme="light"] {
  --bg:            #FAFAFA;
  --bg-alt:        #FFFFFF;
  --surface:       #FFFFFF;
  --surface-sunk:  #F2F2F2;

  --ink:           #0B0B0B;
  --ink-body:      #333333;   /* 12.6:1 */
  --ink-muted:     #5F5F5F;   /*  6.4:1 */
  --ink-faint:     #0B0B0B0A;

  --line:          #E4E4E4;
  --line-strong:   #C9C9C9;

  --accent:        #1D6E88;
  --accent-bright: #185C72;   /* text-safe on near-white, 6.4:1 */
  --accent-wash:   #E8F2F6;
  --accent-warm:   #7E3A3B;
  --accent-warm-text: #185C72;

  --on-accent:     #FFFFFF;
  --focus:         #12607A;

  --success:       #1F6B47;
  --danger:        #A33327;

  --scrim:         rgb(11 11 11 / 0.5);
  --header-bg:     rgb(250 250 250 / 0.8);

  /* Inverted section flips the other way: dark island in a light page. */
  --invert-bg:     #0B0B0B;
  --invert-ink:    #FFFFFF;
  --invert-body:   #D8D8D8;
  --invert-muted:  #9C9C9C;
  --invert-line:   #262626;
  --invert-accent: #5FB9D6;
  --invert-warm:   #E0928A;   /* lifted red, readable on the dark island */

  --shadow-1: 0 1px 2px rgb(11 11 11 / 0.05);
  --shadow-2: 0 6px 20px -8px rgb(11 11 11 / 0.14);
  --shadow-3: 0 24px 60px -24px rgb(11 11 11 / 0.25), 0 8px 20px -12px rgb(11 11 11 / 0.1);
}