:root {
  /* Brand — indigo (platform / trust) */
  --brand-50: #EEF2FF;
  --brand-100: #E0E7FF;
  --brand-200: #C7D2FE;
  --brand-500: #4F46E5;
  --brand-600: #4338CA;
  --brand-700: #3730A3;
  /* Accent — warm orange (prices, CTAs, highlights) */
  --accent-50: #FFF7ED;
  --accent-100: #FFEDD5;
  --accent-200: #FED7AA;
  --accent-500: #F97316;
  --accent-600: #EA580C;
  --accent-700: #C2410C;
  /* Value — green (score badges, savings) */
  --ok-50: #ECFDF5;
  --ok-100: #D1FAE5;
  --ok-500: #10B981;
  --ok-600: #059669;
  --ok-700: #047857;
  /* Neutrals — warm */
  --page: #FAFAF7;
  --surface: #FFFFFF;
  --surface-alt: #F5F5F0;
  --border: #E7E5DE;
  --border-strong: #D6D3CA;
  --text: #1C1B1A;
  --text-2: #57534E;
  --text-muted: #A8A29E;
  /* Dark bands */
  --band-dark: #1C1B22;
  --on-dark: #F5F5F2;
  --on-dark-2: #B8B4AE;
  /* Depth */
  --shadow-sm: 0 1px 2px rgba(28, 27, 26, 0.04), 0 1px 3px rgba(28, 27, 26, 0.06);
  --shadow-md: 0 2px 6px rgba(28, 27, 26, 0.05), 0 6px 16px rgba(28, 27, 26, 0.08);
  --shadow-lg: 0 12px 32px rgba(28, 27, 26, 0.12);
  /* Shape + rhythm */
  --r-sm: 8px;
  --r: 12px;
  --r-pill: 999px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --ease: 150ms ease;
}

[data-theme="dark"],
:root.dark {
  --brand-50: #1E1B4B;
  --brand-100: #312E81;
  --brand-200: #3730A3;
  --brand-500: #818CF8;
  --brand-600: #6366F1;
  --brand-700: #A5B4FC;
  --accent-50: #3A1E0A;
  --accent-100: #7C2D12;
  --accent-200: #9A3412;
  --accent-500: #FB923C;
  --accent-600: #F97316;
  --accent-700: #FDBA74;
  --ok-50: #052E23;
  --ok-100: #064E3B;
  --ok-500: #34D399;
  --ok-600: #10B981;
  --ok-700: #6EE7B7;
  --page: #16161A;
  --surface: #232329;
  --surface-alt: #1E1E23;
  --border: #33333A;
  --border-strong: #44444C;
  --text: #F5F5F2;
  --text-2: #B8B4AE;
  --text-muted: #78716C;
  --band-dark: #0F0F13;
  --on-dark: #F5F5F2;
  --on-dark-2: #B8B4AE;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
}

html {
  overflow-x: clip;
  max-width: 100%;
}

body {
  background: var(--page);
  color: var(--text);
  overflow-x: clip;
  max-width: 100%;
}