:root {
  /* Colors — drawn from the Aurelien II render: warm stone facade, dusk sky, glass */
  --color-charcoal-950: #0a0b0d;
  --color-charcoal-900: #0e1013;
  --color-charcoal-800: #15181d;
  --color-charcoal-700: #1e2228;
  --color-charcoal-600: #2a2f37;
  --color-dusk-900: #101a2e;
  --color-dusk-800: #1b2740;
  --color-dusk-700: #26375a;

  --color-bronze-300: #e3c795;
  --color-bronze-400: #d4b077;
  --color-bronze-500: #c9a063;
  --color-bronze-600: #b0854a;
  --color-bronze-700: #8f6b39;

  --color-ivory-50: #fbfaf7;
  --color-ivory-100: #f6f3ed;
  --color-ivory-200: #ece6da;
  --color-ivory-300: #ddd3c0;

  --color-white: #ffffff;
  --color-black: #000000;

  /* Semantic — light theme: "dark"-labeled tokens now map to the deeper end
     of the light palette so section markup (.section--dark etc.) doesn't
     need to change, only what those tokens resolve to. */
  --bg-dark: var(--color-ivory-200);
  --bg-dark-alt: var(--color-ivory-300);
  --bg-light: var(--color-ivory-100);
  --bg-light-alt: var(--color-ivory-50);
  --text-dark: var(--color-charcoal-900);
  --text-light: var(--color-charcoal-900);
  --text-muted-dark: rgba(14, 16, 19, 0.62);
  --text-muted-light: rgba(14, 16, 19, 0.62);
  --accent: var(--color-bronze-500);
  --accent-strong: var(--color-bronze-700);
  --accent-soft: var(--color-bronze-300);
  --border-light: rgba(14, 16, 19, 0.1);
  --border-dark: rgba(14, 16, 19, 0.1);

  /* Typography */
  --font-display: "Tenor Sans", "Century Gothic", Futura, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-display-xl: clamp(2.75rem, 3.2vw + 2rem, 6.5rem);
  --fs-display-lg: clamp(2.25rem, 2.4vw + 1.6rem, 4.5rem);
  --fs-display-md: clamp(1.75rem, 1.6vw + 1.3rem, 3rem);
  --fs-display-sm: clamp(1.4rem, 1vw + 1.1rem, 2rem);
  --fs-eyebrow: 0.75rem;
  --fs-body-lg: clamp(0.95rem, 0.25vw + 0.9rem, 1.0625rem);
  --fs-body: 0.9375rem;
  --fs-body-sm: 0.8125rem;
  --fs-stat: clamp(2.42rem, 2.52vw + 1.46rem, 4.35rem);

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-normal: 1.6;

  --tracking-wide: 0.16em;
  --tracking-wider: 0.24em;

  /* Spacing scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1.25rem;
  --space-md: 2rem;
  --space-lg: 3.25rem;
  --space-xl: 5.25rem;
  --space-2xl: 8.5rem;
  --space-3xl: 11rem;

  --section-pad-y: clamp(3.25rem, 5.5vw, 6rem);
  --container-max: 1360px;
  --container-pad: clamp(1.5rem, 5vw, 4rem);

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 2px 10px rgba(10, 11, 13, 0.06);
  --shadow-md: 0 12px 32px rgba(10, 11, 13, 0.1);
  --shadow-lg: 0 24px 64px rgba(10, 11, 13, 0.16);
  --shadow-glow: 0 0 0 1px rgba(201, 160, 99, 0.25), 0 20px 60px rgba(201, 160, 99, 0.18);

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.3s;
  --dur-med: 0.6s;
  --dur-slow: 0.9s;

  --z-nav: 250;
  --z-overlay: 200;
  --z-preloader: 300;
}
