/* =========================================================================
   TOKENS — single source of truth for colour, type, space, motion.

   Warm neutrals for the page, one cool near-black for text and actions.
   No accent colour: emphasis comes from type (the italic serif), not hue.
   ========================================================================= */

:root {
  /* ---- Ground ---------------------------------------------------------
     Light theme, so elevation reads as *lighter*: surface-1 sits above
     surface-0. surface-3/4 are recessed fills (inset bars, chrome). */
  --surface-0: #f0e7d9;   /* page                                   */
  --surface-1: #f9f2e7;   /* raised: cards, the hero window         */
  --surface-2: #fdf9f2;   /* input fields inside chrome              */
  --surface-3: #e7dcc9;   /* recessed: title bars, empty media      */
  --surface-4: #d2c5ae;   /* strong fill: scrollbar, mockup dots    */

  /* ---- Line ------------------------------------------------------------ */
  --line:        rgba(32, 26, 16, 0.13);
  --line-strong: rgba(32, 26, 16, 0.26);

  /* ---- Type colour ----------------------------------------------------- */
  --fg:      #16171b;
  --fg-mid:  #4f4b44;
  --fg-dim:  #635e55;   /* AA on every surface, incl. the recessed one, at 12px */

  /* ---- Action ---------------------------------------------------------- */
  --ink:      #16171b;
  --ink-hover:#2b2d33;
  --on-ink:   #f7f1e6;

  /* ---- Dark (image viewer only) ---------------------------------------- */
  --dark-1:   #1e2127;
  --dark-line:rgba(247, 241, 230, 0.14);
  --dark-fg:  #ece4d6;
  --dark-dim: #8d887f;

  /* ---- Type ------------------------------------------------------------
     Instrument Sans for everything; Instrument Serif italic for the one
     emphasised word per view (the two were drawn as a pair). Mono appears
     only where the text is literally code: tech tags, file paths, the URL
     bar in the mockups. */
  --font-display: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --t-hero:  clamp(2.75rem, 1.4rem + 6.2vw, 6.5rem);
  --t-h2:    clamp(1.85rem, 1.2rem + 2.4vw, 3rem);
  --t-h3:    clamp(1.25rem, 1.05rem + 0.8vw, 1.65rem);
  --t-lead:  clamp(1.02rem, 0.95rem + 0.45vw, 1.28rem);
  --t-body:  1rem;
  --t-sm:    0.875rem;
  --t-xs:    0.75rem;

  --lh-tight: 1.04;
  --lh-snug:  1.25;
  --lh-body:  1.65;

  --track-label: 0.1em;

  /* ---- Space (4px base) ------------------------------------------------ */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;

  --section-y: clamp(4.5rem, 9vw, 9rem);
  --gutter:    clamp(1.25rem, 4vw, 3.5rem);
  --measure:   68ch;
  --maxw:      1280px;

  /* ---- Shape: tight corners. Only the nav keeps a full pill. ---------- */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 6px;
  --r-pill: 999px;

  /* ---- Motion: colour changes only, nothing moves. -------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-1: 140ms;
  --dur-2: 200ms;

  --nav-h: 68px;
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; }
}