/* ==========================================================================
   SUZO — Design tokens
   The single source of truth. Nothing below this file hardcodes a colour.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- Ground ------------------------------------------------------------ */
  --ink-900: #080706;
  --ink-800: #0e0c0b;
  --ink-700: #141110;
  --ink-600: #1b1715;
  --ink-500: #241f1c;

  /* --- Ink --------------------------------------------------------------- */
  --text: #f2ede6;
  --text-muted: #a79e93;
  --text-faint: #6e665d;

  /* --- Accent (sampled from the stones) ---------------------------------- */
  --gold: #c9a96a;
  --gold-bright: #e4c88c;
  --carnelian: #a8391e;
  --amber: #c08a2e;
  --cream: #e8dcc8;

  /* --- Lines ------------------------------------------------------------- */
  --line: rgba(242, 237, 230, 0.1);
  --line-strong: rgba(242, 237, 230, 0.2);
  --line-gold: rgba(201, 169, 106, 0.4);

  /* --- Type ---------------------------------------------------------------
     Everything below the two families is a *compensation* token. A typeface is
     not a drop-in swap: a 300-weight didone needs open tracking where a
     grotesque needs negative, and a Japanese gothic wants wider caps and a
     smaller display size than a Bodoni. Themes in type-themes.css override
     these; nothing in the system hardcodes a family, a display weight or a
     display tracking, so a theme is complete without touching components.
     ---------------------------------------------------------------------- */
  --font-display: "Didot", "Bodoni 72", "Playfair Display", Georgia, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --display-weight: 400;
  --display-tracking: -0.02em;
  --display-line: 1;
  --display-transform: none;

  --heading-weight: 400;
  --heading-line: 1.08;
  --h1-tracking: -0.015em;
  --h2-tracking: -0.01em;

  --fs-display: clamp(2.75rem, 1.6rem + 5.2vw, 5.5rem);
  --fs-h1: clamp(2rem, 1.35rem + 2.9vw, 3.5rem);
  --fs-h2: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  --fs-h3: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --fs-body: clamp(0.9375rem, 0.91rem + 0.12vw, 1rem);
  --fs-sm: 0.8125rem;
  --fs-label: 0.6875rem;

  --tracking-label: 0.16em;
  --tracking-wide: 0.08em;

  /* --- Space (8px base) --------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;

  /* --- Layout ------------------------------------------------------------ */
  --container: 1440px;
  --container-narrow: 900px;
  --gutter: var(--space-5);
  --header-h: 68px;

  /* --- Radius ------------------------------------------------------------ */
  --radius-sm: 2px;
  --radius: 3px;
  --radius-pill: 999px;

  /* --- Motion ------------------------------------------------------------ */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur: 240ms;
  --dur-slow: 420ms;

  /* --- Depth (used sparingly — lines do the structural work) -------------- */
  --shadow-drawer: -24px 0 64px rgba(0, 0, 0, 0.6);

  /* --- Z ----------------------------------------------------------------- */
  --z-header: 100;
  --z-scrim: 200;
  --z-drawer: 210;
}

@media (min-width: 900px) {
  :root {
    --gutter: var(--space-7);
    --header-h: 80px;
  }
}