/* ---------------------------------------------------------------------------
   Design tokens — the single source of truth for colour, type and rhythm.

   Palette values are lifted verbatim from the Claude Design prototypes so the
   build matches them exactly. Dark is the default; light is a full re-theme,
   not a washed-out variant.
--------------------------------------------------------------------------- */

:root {
  /* ---- Colour: dark (default) ---- */
  --bg:         #0a0a0c;
  --surface:    #141417;
  --line:       rgba(236, 236, 241, .12);
  --text:       #ececf1;
  --muted:      rgba(236, 236, 241, .68);
  --faint:      rgba(236, 236, 241, .58);   /* 5.9:1 on --bg — WCAG AA */
  --accent:     #ff4d1c;
  /*
    The brand orange is 5.96:1 on the dark ground but only 3.0:1 on the light
    one — fine for fills, borders and display type, below AA for body-size text.
    --accent-text is the same hue darkened until it passes; light theme swaps it
    in for small text while --accent keeps painting the shapes.
  */
  --accent-text: #ff4d1c;
  --ink:        #0a0a0c;
  --chip:       rgba(255, 255, 255, .07);
  --pop:        #ececf1;
  --glow:       rgba(255, 77, 28, .26);
  --logofilter: invert(1) grayscale(1) brightness(1.7);

  /* Semantic status colours, shared by both themes */
  --ok:      #2fbf71;
  --warn:    #ffb020;
  --danger:  #ff3b30;
  --info:    #4d9bff;

  /* ---- Typography ---- */
  --font-display: 'Archivo Black', 'Arial Black', 'Helvetica Neue', sans-serif;
  --font-body:    'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluid scale — clamp(min, preferred, max) */
  --text-xs:    11px;
  --text-sm:    12.5px;
  --text-base:  15px;
  --text-md:    16.5px;
  --text-lg:    18px;
  --text-xl:    clamp(20px, 2.4vw, 24px);
  --text-h3:    clamp(21px, 2.8vw, 28px);
  --text-h2:    clamp(32px, 4vw, 48px);
  --text-h2-lg: clamp(32px, 4.5vw, 52px);
  --text-h1:    clamp(48px, 8vw, 110px);
  --text-hero:  clamp(72px, 12.5vw, 178px);
  --text-scene: clamp(80px, 17vw, 230px);
  --text-ghost: clamp(130px, 24vw, 340px);

  --tracking-eyebrow: .18em;
  --tracking-chrome:  .22em;
  --tracking-label:   .14em;

  /* ---- Spacing & layout ---- */
  /* Height of the sticky header — sticky offsets elsewhere reference these. */
  --header-height: 68px;
  --mobile-header-height: 62px;

  --page-max:     1280px;
  --reading-max:  720px;
  --article-max:  900px;
  --gutter:       clamp(20px, 4vw, 40px);
  --gutter-wide:  clamp(20px, 4vw, 44px);
  --section-y:    clamp(64px, 8vw, 110px);
  --section-y-sm: clamp(48px, 6vw, 80px);
  --hero-y:       clamp(48px, 7vw, 90px);

  /* ---- Shape ---- */
  --radius-sm:   10px;
  --radius:      14px;
  --radius-lg:   18px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --duration-fast:   150ms;
  --duration:        250ms;
  --duration-slow:   700ms;
  --duration-reveal: 1050ms;
  --ease-out:       cubic-bezier(.22, .9, .24, 1);
  --ease-in-out:    cubic-bezier(.76, 0, .24, 1);
  --ease-out-expo:  cubic-bezier(.16, 1, .3, 1);

  /* ---- Elevation ---- */
  --shadow-hard:       5px 5px 0 var(--pop);
  --shadow-hard-hover: 8px 8px 0 var(--pop);
  --shadow-soft:       0 18px 48px rgba(0, 0, 0, .35);
  --shadow-glow:       0 0 90px rgba(255, 77, 28, .22);

  /* ---- Layers ---- */
  --z-grain:     190;
  --z-glow:      180;
  --z-header:     50;
  --z-bar:       210;
  --z-ring:      220;
  --z-preloader: 300;
  --z-modal:     400;

  color-scheme: dark;
}

/* ---- Colour: light ---- */
body[data-theme="light"] {
  --bg:         #f5f3ef;
  --surface:    #ffffff;
  --line:       rgba(10, 10, 12, .14);
  --text:       #141417;
  --muted:      rgba(20, 20, 23, .72);
  --faint:      rgba(20, 20, 23, .65);      /* 5.5:1 on --bg — WCAG AA */
  --chip:       rgba(10, 10, 12, .06);
  --accent-text: #cc2c00;                   /* 5.4:1 on #fff, 4.8:1 on #f5f3ef */
  --pop:        #141417;
  --glow:       rgba(255, 77, 28, .16);
  --logofilter: grayscale(1);

  color-scheme: light;
}

/*
  Sections that stay dark regardless of theme — heroes, the scroll scene, the
  film-set chrome. Applying this class re-declares the dark tokens locally so
  descendants inherit the right contrast without a single hardcoded colour.
*/
.is-dark {
  --bg:      #0a0a0c;
  --surface: #141417;
  --line:    rgba(236, 236, 241, .14);
  --text:    #ececf1;
  --muted:   rgba(236, 236, 241, .68);
  --faint:   rgba(236, 236, 241, .58);
  --chip:    rgba(255, 255, 255, .08);
  --pop:     #ececf1;

  background: #0a0a0c;
  color: #ececf1;
}