:root {
  color-scheme: dark light;
  --ft-black: #04070D;
  --ft-bg: #081220;
  --ft-navy-950: #081220;
  --ft-navy-900: #0A0F1D;
  --ft-navy-800: #0F172A;
  --ft-navy-700: #111827;
  --ft-navy-600: #18232E;
  --ft-navy-500: #243A5E;
  --ft-gold: #D4AF37;
  --ft-gold-light: #E6B977;
  --ft-gold-pale: #FBEFC7;
  --ft-gold-deep: #A8812B;
  --ft-gold-dark: #6E5418;
  --ft-red: #E53935;
  --ft-red-light: #FF5A55;
  --ft-text: #F5F7FA;
  --ft-muted: #AAB2C0;
  --ft-dim: #707E94;
  --ft-border-gold: rgba(212, 175, 55, 0.20);
  --ft-border-gold-strong: rgba(212, 175, 55, 0.44);
  --ft-surface: rgba(8, 15, 28, 0.84);
  --ft-surface-raised: rgba(15, 23, 42, 0.92);
  --ft-grad-gold: linear-gradient(135deg, #FFE8A3 0%, #E6B977 24%, #D4AF37 52%, #B78325 78%, #6E5418 100%);
  --ft-grad-page:
    radial-gradient(circle at 68% 10%, rgba(212, 175, 55, 0.13), transparent 26%),
    radial-gradient(circle at 90% 35%, rgba(194, 31, 44, 0.10), transparent 24%),
    radial-gradient(circle at 20% 82%, rgba(36, 58, 94, 0.36), transparent 35%),
    linear-gradient(145deg, var(--ft-black) 0%, var(--ft-bg) 48%, #05080F 100%);
  --ft-grad-panel: linear-gradient(180deg, rgba(18, 24, 33, 0.94), rgba(8, 13, 22, 0.94));
  --ft-shadow-card: 0 20px 50px rgba(0, 0, 0, 0.38);
  --ft-shadow-lift: 0 28px 70px rgba(0, 0, 0, 0.46);
  --ft-shadow-gold: 0 0 34px rgba(212, 175, 55, 0.16);
  --ft-header-height: 88px;
  --ft-header-condensed-height: 72px;
  --ft-header-height-mobile: 76px;
  --ft-container: 1280px;
  --ft-container-wide: 1360px;
  --ft-page-gutter: 48px;
  --ft-page-gutter-mobile: 44px;
  --ft-nav-gap: 32px;
  --ft-cta-width: 240px;
  --ft-cta-height: 48px;
  --ft-card-width: 280px;
  --ft-card-height: 360px;
  --ft-card-padding: 32px;
  --ft-grid-gap: 24px;
  --ft-radius-card: 16px;
  --ft-radius-panel: 16px;
  --ft-radius-cta: 24px;
  --ft-focus: 0 0 0 3px rgba(244, 216, 138, 0.38);
  --ft-motion-fast: 180ms;
  --ft-motion-med: 320ms;
  --ft-motion-slow: 700ms;
  --ft-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ft-ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --ft-font-display: "Sora", "Hanken Grotesk", system-ui, sans-serif;
  --ft-font-body: "Hanken Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ft-type-12: 0.75rem;
  --ft-type-15: 0.9375rem;
  --ft-type-18: 1.125rem;
  --ft-type-24: 1.5rem;
  --ft-type-30: 1.875rem;
  --ft-type-37: 2.3125rem;
  --ft-type-46: 2.875rem;
  --ft-space-4: 4px;
  --ft-space-8: 8px;
  --ft-space-12: 12px;
  --ft-space-16: 16px;
  --ft-space-24: 24px;
  --ft-space-32: 32px;
  --ft-space-48: 48px;
  --ft-space-64: 64px;
  --ft-space-96: 96px;
  --ft-white: var(--ft-text);
  --ft-soft-gold: var(--ft-gold-pale);
  --ft-font-heading: var(--ft-font-display);
  --ft-red-bright: var(--ft-red-light);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --ft-bg: #F4F1E9;
    --ft-navy-950: #F4F1E9;
    --ft-navy-900: #FFFFFF;
    --ft-navy-800: #EEF1F4;
    --ft-navy-700: #E2E7EC;
    --ft-navy-600: #D7DDE4;
    --ft-navy-500: #9EABB8;
    --ft-gold: #9A7018;
    --ft-gold-light: #76530C;
    --ft-gold-pale: #5D410B;
    --ft-gold-deep: #704D09;
    --ft-gold-dark: #4E3506;
    --ft-red: #B5272F;
    --ft-red-light: #A51F28;
    --ft-text: #172230;
    --ft-muted: #4E5D6C;
    --ft-dim: #667381;
    --ft-border-gold: rgba(130, 91, 13, 0.22);
    --ft-border-gold-strong: rgba(130, 91, 13, 0.42);
    --ft-surface: rgba(255, 255, 255, 0.88);
    --ft-surface-raised: rgba(255, 255, 255, 0.96);
    --ft-grad-gold: linear-gradient(135deg, #6A4807 0%, #9A7018 45%, #C08B20 72%, #76530C 100%);
    --ft-grad-page:
      radial-gradient(circle at 68% 10%, rgba(154, 112, 24, 0.10), transparent 26%),
      radial-gradient(circle at 90% 35%, rgba(181, 39, 47, 0.06), transparent 24%),
      linear-gradient(145deg, #FFFFFF 0%, #F4F1E9 52%, #EEF1F4 100%);
    --ft-grad-panel: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 246, 248, 0.98));
    --ft-shadow-card: 0 18px 42px rgba(35, 45, 56, 0.12);
    --ft-shadow-lift: 0 24px 58px rgba(35, 45, 56, 0.16);
    --ft-shadow-gold: 0 0 28px rgba(154, 112, 24, 0.18);
    --ft-focus: 0 0 0 3px rgba(154, 112, 24, 0.30);
  }
}