/* ==========================================================================
   tokens.css – the design system in one place
   --------------------------------------------------------------------------
   Every colour, spacing step, radius and timing value used on the site is a
   CSS custom property ("token") defined here. Components only ever reference
   tokens, never raw values. Want a different accent colour? Change ONE line.
   Dark mode is just a second set of values for the same tokens.
   ========================================================================== */

:root {
  /* Tells the browser we support both schemes (form controls, scrollbars). */
  color-scheme: light dark;

  /* --- Typography ------------------------------------------------------- */
  /* System font stack: uses the OS's own UI font (San Francisco on Apple
     devices, Segoe UI on Windows, Roboto on Android). Nothing to download. */
  --font-sans: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* --- Colours: light ---------------------------------------------------- */
  --color-bg: #fbfbfd;
  --color-surface: #ffffff;
  --color-surface-2: #f0f0f3;
  --color-text: #1d1d1f;
  --color-text-2: #55555c;          /* secondary text, ~7:1 contrast on bg */
  --color-accent: #b45309;          /* "Zapfhahn" amber, 5:1 on white */
  --color-accent-hover: #963f06;
  --color-on-accent: #ffffff;
  --color-border: rgb(0 0 0 / 0.08);
  --color-focus: #0a66d8;
  --color-error: #c0262d;

  /* Translucent "material" for floating chrome (header). Content scrolls
     underneath and shows through, blurred. */
  --material: rgb(251 251 253 / 0.72);
  --scrim: rgb(0 0 0 / 0.88);       /* dims the page behind the lightbox */

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.04), 0 2px 10px rgb(0 0 0 / 0.04);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.06), 0 16px 40px rgb(0 0 0 / 0.1);

  /* --- Spacing scale (rem, so it grows with the user's font size) -------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  --gutter: 1rem;                   /* side padding of the page */
  --content-width: 72rem;
  --header-height: 3.5rem;

  --radius-sm: 0.625rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-full: 999px;

  /* --- Motion ------------------------------------------------------------ */
  /* ease-out = fast start, gentle settle: feels responsive.
     ease-in is its mirror image, used for exits so the "way out" matches
     the "way in" (spatial consistency). */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.64, 0, 0.78, 0);
  --dur-fast: 120ms;
  --dur: 240ms;
  --dur-slow: 480ms;
}

@media (min-width: 48rem) {
  :root {
    --gutter: 2rem;
    --header-height: 4rem;
  }
}

/* --- Colours: dark ------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #000000;
    --color-surface: #1c1c1e;
    --color-surface-2: #2c2c2e;
    --color-text: #f5f5f7;
    --color-text-2: #a1a1a6;
    --color-accent: #fbbf24;
    --color-accent-hover: #fcd34d;
    --color-on-accent: #1d1d1f;
    --color-border: rgb(255 255 255 / 0.1);
    --color-focus: #4c9ffe;
    --color-error: #ff6b6b;
    --material: rgb(22 22 23 / 0.72);
    --shadow-sm: 0 0 0 1px rgb(255 255 255 / 0.06);
    --shadow-md: 0 0 0 1px rgb(255 255 255 / 0.08), 0 16px 40px rgb(0 0 0 / 0.5);
  }
}