:root {
  /* ===== TYPE SCALE ===== */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero: clamp(2.75rem, 0.5rem + 6.5vw, 6.5rem);

  /* ===== SPACING (4px base) ===== */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ===== FONTS ===== */
  --font-display: 'Cabinet Grotesk', 'General Sans', 'Segoe UI', sans-serif;
  --font-body: 'General Sans', 'Satoshi', 'Segoe UI', sans-serif;

  /* ===== RADIUS ===== */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* ===== TRANSITIONS ===== */
  --transition: 200ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 500ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ===== CORE BRAND COLORS ===== */
  /* Navy / Royal Blue */
  --color-navy-950: #060b1f;
  --color-navy-900: #0a1330;
  --color-navy-800: #101c45;
  --color-navy-700: #172759;
  --color-navy-600: #21356f;
  --color-navy-500: #2f4788;
  --color-blue-accent: #2e5bff;

  /* Gold */
  --color-gold-900: #7a5306;
  --color-gold-700: #a8790a;
  --color-gold-600: #c99416;
  --color-gold-500: #e6b325;
  --color-gold-400: #f4c94a;
  --color-gold-300: #fbdd82;
  --color-gold-200: #fdecb0;

  /* Neutrals / White */
  --color-white: #ffffff;
  --color-cream: #fbfaf7;
  --color-mist: #f2f4f9;
  --color-line: #e2e6f0;

  /* ===== SEMANTIC — LIGHT MODE (default) ===== */
  --color-bg: var(--color-cream);
  --color-surface: var(--color-white);
  --color-surface-2: var(--color-mist);
  --color-border: var(--color-line);

  --color-text: var(--color-navy-900);
  --color-text-muted: #4c5470;
  --color-text-faint: #8891ac;
  --color-text-inverse: #ffffff;

  --color-primary: var(--color-navy-700);
  --color-primary-hover: var(--color-navy-800);

  --color-gold: var(--color-gold-500);
  --color-gold-hover: var(--color-gold-600);

  --color-success: #1c8a5a;
  --color-error: #c23b52;

  --shadow-sm: 0 1px 3px rgba(10, 19, 48, 0.08);
  --shadow-md: 0 8px 24px rgba(10, 19, 48, 0.12);
  --shadow-lg: 0 24px 64px rgba(10, 19, 48, 0.18);
  --shadow-gold: 0 8px 32px rgba(230, 179, 37, 0.35);

  --gradient-hero: radial-gradient(120% 120% at 15% 10%, #17275f 0%, #0a1330 45%, #060b1f 100%);
  --gradient-gold-text: linear-gradient(100deg, var(--color-gold-300) 0%, var(--color-gold-500) 45%, var(--color-gold-700) 100%);
  --gradient-navy-gold: linear-gradient(120deg, var(--color-navy-800) 0%, var(--color-navy-700) 40%, var(--color-gold-700) 100%);
  --gradient-surface-sheen: linear-gradient(135deg, #ffffff 0%, #f7f4ec 50%, #eef1f9 100%);
  --gradient-cta: linear-gradient(100deg, var(--color-gold-400) 0%, var(--color-gold-500) 50%, var(--color-gold-700) 100%);

  --content-wide: 1240px;
}

[data-theme='dark'] {
  --color-bg: var(--color-navy-950);
  --color-surface: var(--color-navy-900);
  --color-surface-2: var(--color-navy-800);
  --color-border: #253262;

  --color-text: #eef1fb;
  --color-text-muted: #a6afd4;
  --color-text-faint: #6b74a0;
  --color-text-inverse: var(--color-navy-950);

  --color-primary: var(--color-gold-400);
  --color-primary-hover: var(--color-gold-300);

  --color-gold: var(--color-gold-400);
  --color-gold-hover: var(--color-gold-300);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.5);
  --shadow-gold: 0 8px 32px rgba(230, 179, 37, 0.25);

  --gradient-surface-sheen: linear-gradient(135deg, #101c45 0%, #0d1638 50%, #0a1330 100%);
}