:root {
  /* ===== CORE PALETTE (MANDATORY) ===== */
  --black: #0E0F11;
  --charcoal: #2A2E32;
  --grey: #B8BDC2;
  --white: #F2F2F2;
  --blue: #2F8FBF;
  --gold: #C9A227;
  --khaki: #C2B280;

  /* ===== SEMANTIC TOKENS ===== */
  --bg: var(--black);
  --bg-soft: var(--charcoal);
  --text-primary: var(--white);
  --text-secondary: var(--grey);
  --accent-primary: var(--blue);
  --accent-gold: var(--gold);
  --accent-khaki: var(--khaki);

  /* ===== TYPOGRAPHY ===== */
  --font-sans: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --fs-900: clamp(2rem, 1.6rem + 1.5vw, 3rem);
  --fs-800: clamp(1.6rem, 1.3rem + 1vw, 2.2rem);
  --fs-700: 1.25rem;
  --fs-600: 1.1rem;
  --fs-500: 1rem;
  --fs-400: 0.9rem;

  /* ===== SPACING ===== */
  --s-2: .5rem;
  --s-4: 1rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-12: 3rem;
  --s-16: 4rem;

  /* ===== RADIUS ===== */
  --r-1: .5rem;
  --r-2: 1rem;
  --r-3: 1.5rem;

  /* ===== SHADOW ===== */
  --shadow-1: 0 20px 40px rgba(0,0,0,.4);

  /* ===== COMPATIBILITY ALIASES FOR EXISTING CSS ===== */
  --brand-olive-900: var(--black);
  --brand-olive-700: var(--charcoal);
  --brand-olive-500: var(--blue);
  --brand-olive-200: var(--khaki);

  --sand-50: var(--white);
  --sand-100: color-mix(in srgb, var(--white) 90%, var(--grey) 10%);
  --sand-200: color-mix(in srgb, var(--khaki) 65%, var(--white) 35%);
  --sand-400: var(--khaki);

  --accent-gold-500: var(--gold);
  --accent-gold-300: var(--khaki);
  --accent-blue-500: var(--blue);

  --text-900: var(--white);
  --text-700: var(--grey);
  --text-500: color-mix(in srgb, var(--grey) 82%, var(--white) 18%);

  --surface: rgba(242,242,242,0.08);
  --surface-strong: rgba(242,242,242,0.12);
  --border-soft: rgba(184,189,194,0.22);

  --ink-900: var(--text-primary);
  --ink-800: color-mix(in srgb, var(--white) 82%, var(--grey) 18%);

  --navy-900: var(--black);
  --navy-800: var(--charcoal);

  --brand-500: var(--blue);
  --brand-600: var(--charcoal);
  --brand-700: var(--black);

  --warm-amber: var(--gold);
  --warm-red: #B33A2B;

  --slate-700: var(--grey);
  --slate-600: color-mix(in srgb, var(--grey) 88%, var(--white) 12%);
  --slate-300: rgba(184,189,194,0.24);
  --slate-200: rgba(184,189,194,0.16);
  --slate-100: rgba(242,242,242,0.10);

  --page-bg:
    radial-gradient(circle at top left, rgba(47,143,191,.08), transparent 28%),
    radial-gradient(circle at bottom right, rgba(201,162,39,.06), transparent 22%),
    var(--black);
}

/* ===== NON-LANDING EDITORIAL SYSTEM TOKENS ===== */
:root{
  --surface-page: var(--bg);
  --surface-panel: color-mix(in srgb, var(--charcoal) 92%, var(--black) 8%);
  --surface-panel-strong: color-mix(in srgb, var(--charcoal) 84%, var(--black) 16%);
  --surface-panel-soft: color-mix(in srgb, var(--charcoal) 74%, var(--black) 26%);
  --surface-elevated: rgba(242,242,242,0.06);

  --text-on-dark: var(--text-primary);
  --text-on-dark-muted: var(--text-secondary);
  --text-on-light: var(--black);
  --text-on-light-muted: var(--charcoal);

  --border-subtle: rgba(184,189,194,0.18);
  --border-strong: rgba(184,189,194,0.28);

  --link-on-dark: var(--accent-primary);
  --link-on-dark-hover: color-mix(in srgb, var(--accent-primary) 82%, var(--white) 18%);

  --panel-gold-bg: color-mix(in srgb, var(--gold) 88%, var(--khaki) 12%);
  --panel-gold-text: var(--black);
  --panel-khaki-bg: color-mix(in srgb, var(--khaki) 72%, var(--charcoal) 28%);
  --panel-khaki-text: var(--black);

  --media-overlay-dark: linear-gradient(180deg, rgba(14,15,17,0.06) 0%, rgba(14,15,17,0.55) 100%);
}