/* ==========================================================================
   DESIGN TOKENS
   Single source of truth for color, type, spacing, radius and motion.
   Change brand colors here — nowhere else. ========================================================================== */

:root {
  /* ---- Color: base ---- */
  --color-ink: #0b0f16;            /* near-black navy — primary background */
  --color-ink-soft: #10161f;       /* slightly lifted navy, panels */
  --color-ink-line: rgba(247, 244, 236, 0.14);
  --color-ink-line-strong: rgba(247, 244, 236, 0.28);

  --color-cream: #f7f3ec;          /* warm off-white — primary light bg */
  --color-cream-dim: #efe9de;      /* secondary light bg / hairline fills */
  --color-cream-line: rgba(11, 15, 22, 0.12);
  --color-cream-line-strong: rgba(11, 15, 22, 0.22);

  --color-champagne: #c7a565;      /* accent — used sparingly */
  --color-champagne-strong: #b8924c;
  --color-champagne-tint: rgba(199, 165, 101, 0.16);

  --color-white: #ffffff;

  /* ---- Color: text ---- */
  --color-text-on-dark: rgba(247, 244, 236, 0.92);
  --color-text-on-dark-dim: rgba(247, 244, 236, 0.64);
  --color-text-on-dark-faint: rgba(247, 244, 236, 0.42);

  --color-text-on-light: #14181f;
  --color-text-on-light-dim: rgba(20, 24, 31, 0.66);
  --color-text-on-light-faint: rgba(20, 24, 31, 0.46);

  /* ---- Typography ---- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Fraunces", "Iowan Old Style", "Georgia", serif;

  --tracking-eyebrow: 0.16em;
  --tracking-wide: 0.04em;

  --fs-eyebrow: 0.75rem;
  --fs-small: 0.875rem;
  --fs-body: 1rem;
  --fs-body-lg: 1.125rem;
  --fs-h5: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
  --fs-h4: clamp(1.4rem, 1.15rem + 1vw, 1.9rem);
  --fs-h3: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem);
  --fs-h2: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem);
  --fs-h1: clamp(2.6rem, 1.7rem + 4.2vw, 5.2rem);

  --lh-tight: 1.05;
  --lh-heading: 1.15;
  --lh-body: 1.6;

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6.5rem;
  --space-12: 8rem;

  /* ---- Layout ---- */
  --container-max: 1360px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --header-h: 88px;
  --header-h-scrolled: 72px;

  /* ---- Radii (deliberately restrained) ---- */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;

  /* ---- Borders ---- */
  --border-hair: 1px solid var(--color-ink-line);
  --border-hair-light: 1px solid var(--color-cream-line);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 620ms;

  /* ---- Elevation (kept minimal on purpose) ---- */
  --shadow-soft: 0 12px 32px -16px rgba(11, 15, 22, 0.28);
  --shadow-panel: 0 24px 64px -24px rgba(11, 15, 22, 0.45);

  /* ---- Z-index scale ---- */
  --z-header: 100;
  --z-nav-overlay: 200;
  --z-toast: 300;
}

@media (min-width: 1024px) {
  :root {
    --header-h: 104px;
    --header-h-scrolled: 76px;
  }
}