/* ==========================================================================
   VAULTED LIGHT — Design tokens
   Single source of truth for colour, type, space, depth and motion.
   ========================================================================== */

:root {
  /* ---- Colour: ink / vault surfaces ---------------------------------- */
  --ink: #0A1018;
  --graphite: #141C28;
  --slate-line: #223044;
  --ink-80: rgba(10, 16, 24, 0.8);
  --ink-60: rgba(10, 16, 24, 0.6);

  /* ---- Colour: light surfaces ---------------------------------------- */
  --platinum: #F6F8FB;
  --surface: #FFFFFF;
  --hairline: #E8ECF3;

  /* ---- Colour: accents ------------------------------------------------ */
  --gold: #C8A44B;
  --gold-bright: #E6C979;
  --gold-deep: #A9873A;
  --emerald: #12A47A;
  --emerald-glow: #3FD9A8;
  --rose: #D8475E;

  /* ---- Colour: text --------------------------------------------------- */
  --text: #0A1018;
  --text-on-dark: #EEF2F8;
  --text-muted: #5B6B80;
  --text-muted-dark: #9AA7B8;

  /* ---- Gradients ------------------------------------------------------ */
  --grad-gold: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 55%, var(--gold-deep) 100%);
  --grad-emerald: linear-gradient(135deg, var(--emerald-glow) 0%, var(--emerald) 100%);
  --grad-ink: linear-gradient(180deg, #0A1018 0%, #101928 100%);
  --grad-glass: linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));

  /* ---- Typography ----------------------------------------------------- */
  --font-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-h1: clamp(2.75rem, 6vw, 5.25rem);
  --fs-h2: clamp(2rem, 3.6vw, 3.25rem);
  --fs-h3: clamp(1.35rem, 1.8vw, 1.6rem);
  --fs-h4: 1.125rem;
  --fs-lead: clamp(1.05rem, 1.35vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-caption: 0.8125rem;

  --lh-display: 1.08;
  --lh-heading: 1.2;
  --lh-body: 1.65;

  --ls-display: -0.022em;
  --ls-caption: 0.14em;

  --measure: 68ch;

  /* ---- Spacing (8px base) --------------------------------------------- */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-7: 6rem;
  --section-y: clamp(5rem, 9vw, 9rem);
  --gutter: clamp(1.25rem, 4vw, 2rem);

  /* ---- Layout --------------------------------------------------------- */
  --container: 1320px;
  --container-narrow: 900px;
  --header-h: 82px;
  --topbar-h: 42px;

  /* ---- Radii ---------------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-pill: 999px;

  /* ---- Elevation: always three stacked layers ------------------------- */
  --e1: 0 1px 2px rgba(10, 16, 24, 0.06), 0 4px 12px rgba(10, 16, 24, 0.05), 0 12px 32px rgba(10, 16, 24, 0.04);
  --e2: 0 2px 6px rgba(10, 16, 24, 0.08), 0 12px 28px rgba(10, 16, 24, 0.09), 0 32px 64px rgba(10, 16, 24, 0.10);
  --e3: 0 0 0 1px rgba(200, 164, 75, 0.28), 0 18px 40px rgba(200, 164, 75, 0.18), 0 40px 90px rgba(10, 16, 24, 0.35);
  --e-glass: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 8px 24px rgba(0, 0, 0, 0.28), 0 24px 60px rgba(0, 0, 0, 0.22);

  /* ---- Glass ---------------------------------------------------------- */
  --glass-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  --glass-border: 1px solid rgba(255, 255, 255, 0.10);
  --glass-blur: blur(22px) saturate(140%);

  /* ---- Motion --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --t-micro: 180ms;
  --t-std: 420ms;
  --t-entrance: 800ms;

  /* ---- Z-index scale --------------------------------------------------- */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 20;
  --z-header: 30;
  --z-overlay: 40;
  --z-modal: 50;
}