:root {
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-500: #2874e8;
  --color-blue-600: #1b5dd8;
  --color-blue-700: #174bb5;
  --color-blue-800: #183d88;
  --color-orange-100: #ffedd5;
  --color-orange-400: #fb923c;
  --color-orange-600: #ea580c;
  --color-orange-700: #c2410c;
  --color-navy-950: #081426;
  --color-navy-900: #0d1b2e;
  --color-navy-850: #11233b;
  --color-navy-800: #162b46;
  --color-gray-25: #fbfdff;
  --color-gray-50: #f7f9fc;
  --color-gray-100: #eef2f7;
  --color-gray-200: #dbe3ed;
  --color-gray-300: #c6d0dc;
  --color-gray-500: #64748b;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1e293b;
  --color-gray-900: #0f172a;
  --color-green-100: #dcfce7;
  --color-green-700: #15803d;
  --color-amber-100: #fef3c7;
  --color-amber-800: #92400e;
  --color-red-100: #fee2e2;
  --color-red-700: #b91c1c;
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-13: 52px;
  --space-14: 56px;
  --space-15: 60px;
  --space-16: 64px;
  --space-17: 68px;
  --space-18: 72px;
  --space-19: 76px;
  --space-20: 80px;
  --space-21: 84px;
  --space-22: 88px;
  --space-23: 92px;
  --space-24: 96px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --size-touch-min: 44px;
  --size-container-max: 1280px;
  --duration-fast: 120ms;
  --duration-standard: 160ms;
  --duration-overlay: 220ms;
  --easing-standard: ease;
  --easing-productive: cubic-bezier(0.2, 0, 0, 1);
  --font-latin: Inter Variable, Inter, Arial, sans-serif;
  --font-arabic: Noto Sans Arabic, Arial, sans-serif;
  --breakpoint-medium: 768px;
  --breakpoint-wide: 1120px;
}

html[data-theme='light'] {
  --color-canvas: var(--color-gray-25);
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-muted: #f2f6fb;
  --color-surface-strong: #e8f0fa;
  --color-text: #102035;
  --color-text-muted: #52647a;
  --color-border: #d8e2ee;
  --color-border-strong: #bdcad9;
  --color-action-primary: var(--color-blue-700);
  --color-action-primary-hover: var(--color-blue-800);
  --color-action-conversion: var(--color-orange-700);
  --color-action-conversion-hover: #9a3412;
  --color-focus: #f97316;
  --color-on-inverse: #f8fafc;
  --color-soft-blue: #eef5ff;
  --color-soft-orange: #fff7ed;
  --shadow-color: rgba(8, 20, 38, 0.12);
  color-scheme: light;
}
html[data-theme='dark'] {
  --color-canvas: var(--color-navy-950);
  --color-surface: var(--color-navy-900);
  --color-surface-raised: var(--color-navy-850);
  --color-surface-muted: #0b1a2d;
  --color-surface-strong: #172d48;
  --color-text: #eef5ff;
  --color-text-muted: #adbed2;
  --color-border: #263c56;
  --color-border-strong: #3a536e;
  --color-action-primary: #76a9ff;
  --color-action-primary-hover: #9bc2ff;
  --color-action-conversion: var(--color-orange-400);
  --color-action-conversion-hover: #fdba74;
  --color-focus: var(--color-orange-400);
  --color-on-inverse: var(--color-navy-950);
  --color-soft-blue: #10284a;
  --color-soft-orange: #3a2015;
  --shadow-color: rgba(0, 0, 0, 0.36);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}