/* ==========================================================================
   Design tokens
   Layer 1 of the cascade. Component CSS references these, never raw numbers.

   Base values are read from the Figma file (1920 frame). Values marked
   [derived] are additions made for the enhanced build — motion, depth,
   colour steps — that the design file does not specify.
   ========================================================================== */

:root {
  /* --- Fluid scaling base -------------------------------------------------
     --vw is set by js/main.js to (documentElement.clientWidth / 100) so it
     excludes the scrollbar. At a 1920px viewport, `calc(7.5 * var(--vw))`
     resolves to exactly 144px — the Figma value. The `1vw` fallback keeps
     the page sane before JS runs.                                          */
  --vw: 1vw;

  /* Scroll velocity, written by JS. Drives skew/blur on kinetic type.
     Range roughly -1 … 1. [derived]                                        */
  --scroll-vel: 0;
  --scroll-progress: 0;

  /* Pointer position in px, written by JS, used by spotlight effects.
     [derived]                                                              */
  --mx: 50vw;
  --my: 50vh;

  /* --- Color ------------------------------------------------------------- */
  --color-navy: #253551; /* page + header/footer base */
  --color-white: #ffffff;
  --color-yellow: #fff9b6; /* accent (buttons, tags) */
  --color-cream: #fdf9cf; /* display headings */
  --color-grey: #c0c0c0; /* muted footer text */

  /* Depth steps around the navy base. [derived] — needed for layered
     surfaces, the preloader and the menu overlay. */
  --color-navy-900: #16203a;
  --color-navy-800: #1c2843;
  --color-navy-700: #253551;
  --color-navy-600: #2f4162;

  --color-bg: var(--color-navy);
  --color-text: var(--color-white);
  --color-text-muted: var(--color-grey);
  --color-accent: var(--color-yellow);

  --color-rule: rgb(255 255 255 / 0.2); /* hairline dividers */
  --color-rule-soft: rgb(255 255 255 / 0.1);
  --color-overlay: rgb(37 53 81 / 0.6);

  /* Semantic pairs. Anything that must survive a theme flip references
     these rather than --color-white, which stays literally white because
     the project body is a paper surface and the tags sit on dark photos. */
  --color-line: var(--color-white); /* full-strength rules on the page ground */
  --color-ink: #20211f; /* text on a paper surface */
  --color-invert-surface: var(--color-white); /* solid button / skip-link */
  --color-invert-text: #20211f; /* text on that surface */

  /* --- Type families ----------------------------------------------------- */
  --font-display: "Butler", "Cormorant Garamond", "Times New Roman", serif;
  --font-body: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif;

  /* --- Type scale ---------------------------------------------------------
     Figma name                     size / line-height / tracking
     Decorative / Medium            216 / 216 / 0
     Display / Caps                 144 / 160 / 10
     Display / Medium               144 / 160 / -2
     Heading 1                       86 / 96  / 0
     Heading 2                       54 / 64  / 0
     Heading 4                       24 / 32  / 0
     Desktop / Body Strong           18 / 32  / 0
     Paragraph / Regular|Bold        16 / 32  / 0
     Small Caps                      12 / 16  / 2
     Line-heights are unitless (figma px ÷ font px).                        */

  --fs-decorative: clamp(72px, calc(11.25 * var(--vw)), 216px);
  --lh-decorative: 1;

  /* Display / Large — 170/160/-2, used by the 404 marquee. */
  --fs-display-lg: clamp(56px, calc(8.854 * var(--vw)), 170px);
  --lh-display-lg: 0.9412; /* 160/170 */

  --fs-display: clamp(44px, calc(7.5 * var(--vw)), 144px);
  --lh-display: 1.1111; /* 160/144 */
  --ls-display-caps: 0.0694em; /* 10/144 */
  --ls-display: -0.0139em; /* -2/144 */

  --fs-h1: clamp(36px, calc(4.4792 * var(--vw)), 86px);
  --lh-h1: 1.1163; /* 96/86 */

  --fs-h2: clamp(30px, calc(2.8125 * var(--vw)), 54px);
  --lh-h2: 1.1852; /* 64/54 */

  --fs-h4: clamp(20px, calc(1.25 * var(--vw)), 24px);
  --lh-h4: 1.58; /* 32/24 */

  --fs-body-strong: clamp(16px, calc(0.9375 * var(--vw)), 18px);
  --lh-body-strong: 1.7778; /* 32/18 */

  --fs-body: 16px;
  --lh-body: 2; /* 32/16 */

  --fs-caps: 12px;
  --lh-caps: 1.3333; /* 16/12 */
  --ls-caps: 0.1667em; /* 2/12 */

  /* --- Layout -------------------------------------------------------------
     Frame 1920 · gutter 120 · content 1680                                  */
  --frame-w: 1920px;
  --content-w: 1680px;
  --gutter: clamp(20px, calc(6.25 * var(--vw)), 120px);
  --header-h: 123px;

  /* --- Spacing scale (4/8pt rhythm, clustered from the design) ----------- */
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-30: 30px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;
  --sp-50: 50px;
  --sp-60: 60px;
  --sp-64: 64px;
  --sp-80: 80px;
  --sp-96: 96px;
  --sp-120: clamp(48px, calc(6.25 * var(--vw)), 120px);
  --sp-180: clamp(64px, calc(9.375 * var(--vw)), 180px);
  --sp-200: clamp(72px, calc(10.417 * var(--vw)), 200px);

  /* --- Motion ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* expo out */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* [derived] overshoot */
  --ease-mask: cubic-bezier(0.77, 0, 0.175, 1); /* [derived] curtain */
  --dur-fast: 240ms;
  --dur-base: 480ms;
  --dur-slow: 900ms;
  --dur-curtain: 1100ms; /* [derived] page transition */

  /* --- Elevation / effects [derived] ------------------------------------- */
  --shadow-card: 0 40px 90px -40px rgb(0 0 0 / 0.65);
  --shadow-float: 0 24px 60px -24px rgb(0 0 0 / 0.5);
  --blur-glass: saturate(160%) blur(14px);

  /* --- Z-index ladder [derived] ------------------------------------------ */
  --z-grain: 9000;
  --z-cursor: 9500;
  --z-curtain: 9800;
  --z-preloader: 9900;
  --z-header: 100;
  --z-menu: 8000;
}

/* --------------------------------------------------------------------------
   Light theme [derived] — not in the Figma file. Offered as a user control
   because the palette inverts cleanly: navy ink on a warm paper ground.
   -------------------------------------------------------------------------- */
:root[data-theme="light"] {
  --color-bg: #f4f1e6;
  --color-text: #1b2438;
  --color-text-muted: #5d6577;
  --color-cream: #253551;
  --color-yellow: #978327;
  --color-accent: #978327;
  --color-rule: rgb(27 36 56 / 0.22);
  --color-rule-soft: rgb(27 36 56 / 0.1);
  --color-navy: #f4f1e6;
  --color-navy-900: #e8e3d2;
  --color-navy-800: #ece7d8;
  --color-overlay: rgb(244 241 230 / 0.6);
  --shadow-card: 0 40px 90px -46px rgb(27 36 56 / 0.35);

  --color-line: #1b2438;
  --color-invert-surface: #1b2438;
  --color-invert-text: #f4f1e6;
}