/* Design tokens.
   Default = light e-commerce theme ("Clear Lagoon"). Dark = "Deep Ocean" brand theme via [data-theme="dark"].
   Token names are semantic: --aqua is the primary brand accent in both themes. */
:root {
  color-scheme: light;

  --bg: #F5F8FB;
  --bg-2: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F0F4F8;
  --surface-glass: rgba(255, 255, 255, 0.85);
  --line: rgba(11, 116, 181, 0.25);
  --line-soft: #E3E9F0;
  --media-bg: #EEF3F8;

  --aqua: #0B74B5;
  --head-accent: #2A9BD6;
  --aqua-2: #0EA5E9;
  --aqua-soft: rgba(11, 116, 181, 0.08);
  --cta: #F26B1D;
  --cta-hover: #DD5A0E;
  --cta-soft: rgba(242, 107, 29, 0.10);
  --amber: #F59E0B;
  --amber-soft: rgba(245, 158, 11, 0.14);
  --amber-ink: #B45309;
  --star: #F59E0B;
  --wa: #25D366;
  --wa-hover: #1EBE5D;
  --red: #E11D48;
  --red-soft: rgba(225, 29, 72, 0.08);
  --green: #15803D;
  --green-soft: rgba(22, 163, 74, 0.10);

  --text: #0F172A;
  --text-2: #334155;
  --muted: #5B6B7F;
  --muted-2: #8A97A8;
  --on-accent: #FFFFFF;

  --grad-aqua: linear-gradient(135deg, #0EA5E9 0%, #0B74B5 100%);
  --grad-brand: linear-gradient(90deg, #0B3A5B 0%, #0B74B5 100%);

  --chrome-bg: rgba(255, 255, 255, 0.92);
  --bar-bg: rgba(255, 255, 255, 0.96);
  --sticky-bg: rgba(245, 248, 251, 0.95);
  --card-bg: #FFFFFF;
  --toast-bg: rgba(15, 23, 42, 0.94);
  --toast-text: #F8FAFC;
  --inset-bg: #F5F8FB;
  --scrim: rgba(15, 23, 42, 0.45);
  --glass-bg: rgba(15, 23, 42, 0.04);
  --glass-border: rgba(15, 23, 42, 0.12);
  --body-glow-1: transparent;
  --body-glow-2: transparent;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.05);
  --shadow: 0 10px 28px -14px rgba(15, 23, 42, 0.28);
  --shadow-lg: 0 18px 44px -16px rgba(15, 23, 42, 0.32);
  --glow: 0 6px 16px -6px rgba(11, 116, 181, 0.45);
  --glow-wa: 0 8px 22px -8px rgba(37, 211, 102, 0.6);

  /* Hero slide palettes */
  --slide-1: linear-gradient(120deg, #E0F2FE 0%, #BAE6FD 100%);
  --slide-2: linear-gradient(120deg, #DCFCE7 0%, #A7F3D0 100%);
  --slide-3: linear-gradient(120deg, #FFEDD5 0%, #FED7AA 100%);
  --corner-bg: linear-gradient(180deg, #E0F2FE 0%, #F0F9FF 100%);
  --deal-bg: linear-gradient(180deg, #FFF7ED 0%, #FFFFFF 100%);

  --font-head: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Section headings and the brand name: bold rounded title */
  --font-display: 'Fredoka', 'Outfit', ui-sans-serif, system-ui, sans-serif;

  --r-xs: 8px;
  --r-sm: 12px;
  --r: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  --gutter: 16px;
  --maxw: 1680px; /* fills a laptop screen; caps only on very large monitors */
  /* Side padding that lines full-width bars up with the centred content column.
     Percentages in padding/margin resolve against the page width. */
  --side: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  --header-h: 112px;
  --bottombar-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Dark: "Deep Ocean" neon brand theme */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0A0F1D;
  --bg-2: #0D1527;
  --surface: #141C2E;
  --surface-2: #1A2438;
  --surface-glass: rgba(20, 28, 46, 0.72);
  --line: rgba(0, 242, 254, 0.18);
  --line-soft: rgba(148, 163, 184, 0.14);
  --media-bg: #101828;

  --aqua: #00F2FE;
  --head-accent: #7DD3FC;
  --aqua-2: #4FACFE;
  --aqua-soft: rgba(0, 242, 254, 0.12);
  --cta: #FF8A3D;
  --cta-hover: #FF7A24;
  --cta-soft: rgba(255, 138, 61, 0.14);
  --amber: #FFB800;
  --amber-soft: rgba(255, 184, 0, 0.14);
  --amber-ink: #FFD666;
  --star: #FFB800;
  --red: #FF5C7A;
  --red-soft: rgba(255, 92, 122, 0.14);
  --green: #34D399;
  --green-soft: rgba(52, 211, 153, 0.14);

  --text: #F8FAFC;
  --text-2: #CBD5E1;
  --muted: #94A3B8;
  --muted-2: #64748B;
  --on-accent: #0A0F1D;

  --grad-aqua: linear-gradient(135deg, #00F2FE 0%, #4FACFE 100%);
  --grad-brand: linear-gradient(90deg, #06101F 0%, #0B2540 100%);

  --chrome-bg: rgba(13, 21, 39, 0.9);
  --bar-bg: rgba(13, 21, 39, 0.94);
  --sticky-bg: rgba(10, 15, 29, 0.94);
  --card-bg: #141C2E;
  --toast-bg: rgba(26, 36, 56, 0.97);
  --toast-text: #F8FAFC;
  --inset-bg: #0D1527;
  --scrim: rgba(3, 6, 14, 0.7);
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.16);
  --body-glow-1: rgba(0, 242, 254, 0.10);
  --body-glow-2: rgba(79, 172, 254, 0.08);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 18px 40px -12px rgba(0, 0, 0, 0.8);
  --glow: 0 0 0 1px rgba(0, 242, 254, 0.3), 0 10px 30px -8px rgba(0, 242, 254, 0.45);

  --slide-1: linear-gradient(120deg, #0B2540 0%, #0E3A5F 100%);
  --slide-2: linear-gradient(120deg, #0B2E2A 0%, #0F4A3C 100%);
  --slide-3: linear-gradient(120deg, #33200F 0%, #4A2C12 100%);
  --corner-bg: linear-gradient(180deg, #0D1F35 0%, #0D1527 100%);
  --deal-bg: linear-gradient(180deg, #2A1A0E 0%, #141C2E 100%);
}

@media (min-width: 768px) {
  :root { --gutter: 24px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 32px; --header-h: 150px; }
}
@media (min-width: 1440px) {
  :root { --gutter: 40px; }
}