/* Smart Shopping design tokens — the only place raw colours live.
   Light is the brand's home; dark mirrors it for viewers who prefer it. */
:root {
  --c-primary: #4f46e5;
  --c-primary-dark: #3730a3;
  --c-on-primary: #ffffff;
  --c-link: #4f46e5;
  --c-link-hover: #3730a3;
  --c-primary-soft: #eef2ff;
  --c-primary-line: #c7d2fe;
  --c-primary-ink: #3730a3;
  --c-navy: #101828;
  --c-navy-2: #1d2939;
  --c-navy-line: #344054;
  --c-on-navy: #ffffff;
  --c-on-navy-2: #c3c9d4;
  --c-coral: #ff5a5f;
  --c-coral-strong: #e0383e;
  --c-coral-ink: #c01048;
  --c-coral-soft: #fff1f2;
  --c-cyan: #22d3ee;
  --c-cyan-ink: #0e7490;
  --c-bg: #f8fafc;
  --c-surface: #ffffff;
  --c-surface-2: #f8fafc;
  --c-text: #111827;
  --c-heading: #101828;
  --c-text-2: #344054;
  --c-muted: #667085;
  --c-border: #e4e7ec;
  --c-border-strong: #d0d5dd;
  --c-fill: #f2f4f7;
  --c-skel-a: #eef0f4;
  --c-skel-b: #f8fafc;
  --c-success: #16a34a;
  --c-success-soft: #dcfce7;
  --c-success-ink: #15803d;
  --c-error: #dc2626;
  --c-error-ink: #b42318;
  --c-error-soft: #fef3f2;
  --c-error-line: #fecdca;
  --c-warn-ink: #92400e;
  --c-warn-soft: #fffbeb;
  --c-warn-line: #fde68a;
  --c-low: #b45309;
  --c-star: #f59e0b;
  --c-overlay: rgba(16, 24, 40, 0.6);
  --c-toast: #101828;
  --c-toast-text: #ffffff;
  --glow-indigo: rgba(79, 70, 229, 0.55);
  --glow-cyan: rgba(34, 211, 238, 0.3);
  --glow-white: rgba(255, 255, 255, 0.35);

  --font: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-hero: clamp(2.5rem, 5.4vw, 4.5rem);
  --fs-h1: clamp(2rem, 4vw, 2.75rem);
  --fs-h2: clamp(1.625rem, 2.6vw, 2.25rem);
  --fs-h3: 1.125rem;
  --fs-lg: 1.0625rem;
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.8125rem;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 22px 44px -22px rgba(16, 24, 40, 0.3);
  --shadow-lg: 0 40px 80px -40px rgba(16, 24, 40, 0.45);

  --container: 1280px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-link: #a5b4fc;
    --c-link-hover: #c7d2fe;
    --c-primary-soft: #1e1b4b;
    --c-primary-line: #3730a3;
    --c-primary-ink: #c7d2fe;
    --c-navy: #070c18;
    --c-navy-2: #111a2e;
    --c-navy-line: #2a3650;
    --c-coral-ink: #fda4af;
    --c-coral-soft: #3b0d18;
    --c-cyan-ink: #67e8f9;
    --c-bg: #0b1220;
    --c-surface: #111a2e;
    --c-surface-2: #0f1729;
    --c-text: #eef1f6;
    --c-heading: #ffffff;
    --c-text-2: #d0d5dd;
    --c-muted: #98a2b3;
    --c-border: #24324a;
    --c-border-strong: #33425e;
    --c-fill: #1a2438;
    --c-skel-a: #1a2438;
    --c-skel-b: #24324a;
    --c-success-soft: #0f2e1d;
    --c-success-ink: #4ade80;
    --c-error: #f87171;
    --c-error-ink: #fca5a5;
    --c-error-soft: #3a1414;
    --c-error-line: #7f1d1d;
    --c-warn-ink: #fcd34d;
    --c-warn-soft: #2d2208;
    --c-warn-line: #6b4f0e;
    --c-low: #fbbf24;
    --c-overlay: rgba(0, 0, 0, 0.7);
    --c-toast: #f2f4f7;
    --c-toast-text: #101828;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --c-link: #a5b4fc;
  --c-link-hover: #c7d2fe;
  --c-primary-soft: #1e1b4b;
  --c-primary-line: #3730a3;
  --c-primary-ink: #c7d2fe;
  --c-navy: #070c18;
  --c-navy-2: #111a2e;
  --c-navy-line: #2a3650;
  --c-coral-ink: #fda4af;
  --c-coral-soft: #3b0d18;
  --c-cyan-ink: #67e8f9;
  --c-bg: #0b1220;
  --c-surface: #111a2e;
  --c-surface-2: #0f1729;
  --c-text: #eef1f6;
  --c-heading: #ffffff;
  --c-text-2: #d0d5dd;
  --c-muted: #98a2b3;
  --c-border: #24324a;
  --c-border-strong: #33425e;
  --c-fill: #1a2438;
  --c-skel-a: #1a2438;
  --c-skel-b: #24324a;
  --c-success-soft: #0f2e1d;
  --c-success-ink: #4ade80;
  --c-error: #f87171;
  --c-error-ink: #fca5a5;
  --c-error-soft: #3a1414;
  --c-error-line: #7f1d1d;
  --c-warn-ink: #fcd34d;
  --c-warn-soft: #2d2208;
  --c-warn-line: #6b4f0e;
  --c-low: #fbbf24;
  --c-overlay: rgba(0, 0, 0, 0.7);
  --c-toast: #f2f4f7;
  --c-toast-text: #101828;
  color-scheme: dark;
}