:root {
  /* ---------- COLOR: FOREST / EMERALD SCALE ---------- */
  --forest-950: #020e0b;
  --forest-900: #031411;
  --forest-850: #051a16;
  --forest-800: #061e19;
  --forest-700: #092a23;
  --forest-600: #0d3028;
  --forest-500: #123c32;
  --forest-400: #1a4c40;
  --forest-300: #2c6456;
  --forest-200: #4a8577;
  --forest-100: #7fada0;

  --emerald-900: #073d31;
  --emerald-800: #0b5d4b;
  --emerald-700: #0e6c58;
  --emerald-600: #117a62;
  --emerald-500: #16916f;
  --emerald-400: #22a883;
  --emerald-300: #4dbf9e;
  --emerald-200: #8ad6c0;
  --emerald-100: #c6ece0;

  /* ---------- COLOR: GOLD / BRASS SCALE (ACCENT ONLY) ---------- */
  --gold-900: #7a6132;
  --gold-800: #9c7f42;
  --gold-700: #b3924e;
  --gold-600: #c9a45c;
  --gold-500: #d4b46e;
  --gold-400: #e4c77a;
  --gold-300: #ecd696;
  --gold-200: #f3e4b8;
  --gold-100: #f9f0da;

  /* ---------- COLOR: NEUTRAL / CREAM SCALE ---------- */
  --cream-100: #f3ebdd;
  --cream-50: #f7f5ef;
  --white: #ffffff;
  --muted-500: #a9b7b1;
  --muted-400: #8ea099;
  --muted-300: #71857e;

  /* ---------- SEMANTIC TOKENS ---------- */
  --color-bg: var(--forest-800);
  --color-bg-deep: var(--forest-900);
  --color-surface: var(--forest-600);
  --color-surface-raised: var(--forest-500);
  --color-border-hairline: rgba(243, 235, 221, 0.12);
  --color-border-hairline-strong: rgba(243, 235, 221, 0.22);
  --color-text-primary: var(--cream-50);
  --color-text-secondary: var(--muted-500);
  --color-text-inverse: var(--forest-900);
  --color-accent: var(--emerald-500);
  --color-accent-strong: var(--emerald-400);
  --color-luxury-accent: var(--gold-600);
  --color-luxury-accent-light: var(--gold-400);
  --color-success: var(--emerald-400);
  --color-error: #d9695a;
  --color-focus-ring: var(--gold-400);

  /* ---------- SPACING SCALE (4px BASE GRID) ---------- */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-8: 16px;
  --space-10: 20px;
  --space-12: 24px;
  --space-16: 32px;
  --space-20: 40px;
  --space-24: 48px;
  --space-32: 64px;
  --space-40: 80px;
  --space-48: 96px;
  --space-56: 112px;
  --space-64: 128px;
  --space-80: 160px;
  --space-96: 192px;

  /* ---------- RADIUS SCALE (DELIBERATELY MINIMAL) ---------- */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  /* Do not introduce radius-lg/xl/2xl/full for structural surfaces.
     Fully round radii are reserved for small functional dots/indicators only. */
  --radius-pill: 999px;

  /* ---------- TYPE SCALE ---------- */
  --font-serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-sans: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 28px;
  --fs-3xl: 32px;
  --fs-4xl: 40px;
  --fs-5xl: 48px;
  --fs-6xl: 56px;
  --fs-7xl: 64px;
  --fs-8xl: 72px;
  --fs-9xl: 88px;
  --fs-10xl: 112px;

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --ls-tightest: -0.02em;
  --ls-tight: -0.01em;
  --ls-normal: 0em;
  --ls-wide: 0.04em;
  --ls-widest: 0.14em;
  --ls-label: 0.18em;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* ---------- MOTION: DURATION TOKENS (MS) ---------- */
  --dur-instant: 100ms;
  --dur-micro: 150ms;
  --dur-fast: 200ms;
  --dur-base: 250ms;
  --dur-moderate: 300ms;
  --dur-slow: 400ms;
  --dur-reveal: 500ms;
  --dur-hero: 700ms;
  --dur-cinematic: 900ms;
  --dur-reduced: 120ms;

  /* ---------- MOTION: EASING TOKENS ---------- */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-cinematic: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-soft: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-linear: linear;

  /* ---------- Z-INDEX SCALE ---------- */
  --z-base: 0;
  --z-content: 10;
  --z-sticky-header: 100;
  --z-cursor: 150;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-preloader: 500;

  /* ---------- BREAKPOINTS (REFERENCE ONLY — USE IN MEDIA QUERIES) ---------- */
  /* xs: 360px, sm: 480px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1440px, 3xl: 1920px */

  /* ---------- CONTAINER WIDTHS ---------- */
  --container-sm: 100%;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1152px;
  --container-2xl: 1320px;
  --container-max: 1440px;
  --container-gutter-mobile: 20px;
  --container-gutter-tablet: 32px;
  --container-gutter-desktop: 64px;

  /* ---------- SHADOW (MINIMAL — TWO ONLY) ---------- */
  --shadow-hairline: 0 0 0 1px var(--color-border-hairline);
  --shadow-lift: 0 8px 24px -12px rgba(3, 20, 17, 0.55);
}

@media (prefers-color-scheme: light) {
  /* Zaykara is a dark-atmosphere brand; do not create a light theme.
     If the host platform forces a light preference, keep the same
     dark palette — this site does not invert. */
}