:root {
  --ff-bg: #F6F7F9;
  --ff-bg-elevated: #FFFFFF;
  --ff-surface: #FFFFFF;
  --ff-surface-soft: #F1F4F8;
  --ff-surface-subtle: #FAFBFC;
  --ff-text-primary: #111827;
  --ff-text-secondary: #5B6472;
  --ff-text-muted: #8A94A3;
  --ff-text-inverse: #FFFFFF;
  --ff-border: #E4E8EF;
  --ff-border-strong: #D6DCE6;
  --ff-primary: #1F4FD8;
  --ff-primary-hover: #173FB0;
  --ff-primary-soft: #EAF0FF;
  --ff-success: #1F8A5B;
  --ff-success-soft: #EAF8F1;
  --ff-warning: #B7791F;
  --ff-warning-soft: #FFF7E6;
  --ff-danger: #C2413B;
  --ff-danger-soft: #FFF0EF;
  --ff-glass-bg: rgba(255, 255, 255, 0.72);
  --ff-glass-bg-strong: rgba(255, 255, 255, 0.84);
  --ff-glass-border: rgba(255, 255, 255, 0.55);
  --ff-glass-shadow: 0 18px 50px rgba(17, 24, 39, 0.14);

  --ff-text-hero-mobile: 32px;
  --ff-text-page-mobile: 30px;
  --ff-text-section-mobile: 24px;
  --ff-text-card-mobile: 19px;
  --ff-text-body-mobile: 16px;
  --ff-text-meta-mobile: 13px;
  --ff-text-button-mobile: 15px;
  --ff-text-hero-desktop: clamp(42px, 5vw, 56px);
  --ff-text-page-desktop: clamp(38px, 4vw, 48px);
  --ff-text-section-desktop: 32px;
  --ff-text-card-desktop: 22px;
  --ff-text-body-desktop: 17px;
  --ff-text-meta-desktop: 13px;
  --ff-text-button-desktop: 15px;

  --ff-leading-hero: 1.06;
  --ff-leading-title: 1.12;
  --ff-leading-card: 1.25;
  --ff-leading-body: 1.62;
  --ff-leading-meta: 1.4;

  --ff-space-1: 4px;
  --ff-space-2: 8px;
  --ff-space-3: 12px;
  --ff-space-4: 16px;
  --ff-space-5: 20px;
  --ff-space-6: 24px;
  --ff-space-8: 32px;
  --ff-space-10: 40px;
  --ff-space-12: 48px;
  --ff-space-16: 64px;
  --ff-space-20: 80px;

  --ff-radius-xs: 8px;
  --ff-radius-sm: 12px;
  --ff-radius-md: 16px;
  --ff-radius-lg: 20px;
  --ff-radius-card: 24px;
  --ff-radius-xl: 28px;
  --ff-radius-pill: 999px;
  --ff-shadow-card: 0 10px 30px rgba(17, 24, 39, 0.06);
  --ff-shadow-card-hover: 0 18px 45px rgba(17, 24, 39, 0.10);
  --ff-shadow-glass: 0 18px 50px rgba(17, 24, 39, 0.14);
  --ff-shadow-none: none;

  --ff-motion-fast: 140ms;
  --ff-motion-base: 180ms;
  --ff-motion-slow: 280ms;
  --ff-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);

  --ff-reading-width: 760px;
  --ff-hero-width: 920px;
  --ff-page-width: 1180px;
  --ff-learning-width: 1120px;
  --ff-cockpit-width: 1180px;

  /* Compatibility aliases for the existing static codebase. */
  --ff-color-bg: var(--ff-bg);
  --ff-color-surface: var(--ff-surface);
  --ff-color-surface-muted: var(--ff-surface-soft);
  --ff-color-text: var(--ff-text-primary);
  --ff-color-text-muted: var(--ff-text-secondary);
  --ff-color-accent: var(--ff-primary);
  --ff-color-accent-soft: var(--ff-primary-soft);
  --ff-color-success: var(--ff-success);
  --ff-color-error: var(--ff-danger);
  --ff-shadow-subtle: var(--ff-shadow-card);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ff-bg: #070A10;
    --ff-bg-elevated: #0F1724;
    --ff-surface: #111827;
    --ff-surface-soft: #172033;
    --ff-surface-subtle: #0C111D;
    --ff-text-primary: #F8FAFC;
    --ff-text-secondary: #C5CEDB;
    --ff-text-muted: #93A0B3;
    --ff-text-inverse: #FFFFFF;
    --ff-border: rgba(226, 232, 240, 0.14);
    --ff-border-strong: rgba(226, 232, 240, 0.22);
    --ff-primary: #8FB1FF;
    --ff-primary-hover: #B4C8FF;
    --ff-primary-soft: rgba(143, 177, 255, 0.14);
    --ff-success-soft: rgba(31, 138, 91, 0.18);
    --ff-warning-soft: rgba(183, 121, 31, 0.18);
    --ff-danger-soft: rgba(194, 65, 59, 0.18);
    --ff-glass-bg: rgba(15, 23, 36, 0.72);
    --ff-glass-bg-strong: rgba(15, 23, 36, 0.86);
    --ff-glass-border: rgba(226, 232, 240, 0.14);
    --ff-glass-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
    --ff-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.26);
    --ff-shadow-card-hover: 0 18px 45px rgba(0, 0, 0, 0.34);
    --ff-shadow-glass: 0 18px 50px rgba(0, 0, 0, 0.38);
  }
}