/* Wasel — shared theme tokens (both pages)
   Light is the default for the body of every page. `.theme-dark` scopes the
   header, hero, footer and the high-contrast sections. Components never use
   raw colours: they read the channels below, so one class flips a whole
   section. Mirrors docs/design-system.html → #tokens / #colors. */

:root {
  /* constant brand values — identical in both themes */
  --wasel-green: #22c55e;
  --g-14: rgba(34,197,94,.14);
  --ink: #050a18;          /* text on blue fills, both themes */
  --ink-blue: #00121f;
  --ink-blue-2: #061018;
}

/* ---- channels: dark blue + black palette (default & global) ---- */
:root, .theme-light, .theme-dark {
  --fg-rgb: 240,246,255;
  --bg-rgb: 3,7,18;
  --blue-rgb: 43,178,255;
  --warn-rgb: 251,146,60;

  --wasel-blue: #2bb2ff;
  --wasel-blue-700: #0284c7;
  --wasel-blue-200: #7dd3fc;
  --wasel-blue-50: #081a36;
  --warn: #fb923c;              /* 8.7:1 on #030712 */

  /* Solar warm amber accent */
  --wasel-amber: #f59e0b;
  --wasel-amber-rgb: 245,158,11;
  --wasel-amber-glow: rgba(245, 158, 11, 0.4);
  --wasel-amber-soft: rgba(245, 158, 11, 0.12);

  --on-blue: #030712;
  --bg-base: #030712;           /* deep midnight black */
  --bg-alt: #071329;            /* deep navy dark-blue for alternate bands */
  --surface-1: #0a1936;         /* rich dark blue surface for cards */
  --surface-2: #0e2246;         /* secondary elevated dark blue */
  --surface-deep: #02050e;      /* deepest black-blue */
  --grid-dot: rgba(56,189,248,.09);

  /* Tailwind dark mapping */
  --tw-white: 240 246 255;
  --tw-black: 3 7 18;
  --zinc-50: 248 250 252;  --zinc-100: 241 245 249; --zinc-200: 226 232 240;
  --zinc-300: 203 213 225; --zinc-400: 148 163 184; --zinc-500: 100 116 139;
  --zinc-600: 71 85 105;   --zinc-700: 51 65 85;    --zinc-800: 30 41 59;
  --zinc-900: 15 23 42;    --zinc-950: 3 7 18;

  --sh-img: 0 22px 34px rgba(0,0,0,.65);
  --sh-img-hover: 0 28px 40px rgba(0,0,0,.75);
  --sh-pop: 0 14px 34px rgba(0,0,0,.6);
  --sh-toast: 0 16px 36px rgba(0,0,0,.6);
}

/* ---- derived tokens: re-declared in every scope so they resolve
       against the nearest theme, not against :root ---- */
:root, .theme-light, .theme-dark {
  --surface-header: transparent;
  --surface-header-stuck: transparent;
  --surface-glass: rgba(255,255,255,.03);
  --surface-glass-2: rgba(43,178,255,.05);
  --surface-hover: rgba(43,178,255,.04);
  --surface-input: #0a1936;

  --hairline: rgba(255,255,255,.07);
  --hairline-2: rgba(255,255,255,.12);
  --hairline-3: rgba(43,178,255,.18);
  --hairline-dash: rgba(43,178,255,.12);
  --grid-line: rgba(43,178,255,.10);

  --t-100: rgb(var(--fg-rgb));
  --t-86: rgba(var(--fg-rgb),.86);
  --t-78: rgba(var(--fg-rgb),.78);
  --t-72: rgba(var(--fg-rgb),.72);
  --t-62: rgba(var(--fg-rgb),.62);
  --t-58: rgba(var(--fg-rgb),.58);
  --t-55: rgba(var(--fg-rgb),.55);
  --t-50: rgba(var(--fg-rgb),.5);
  --t-45: rgba(var(--fg-rgb),.45);
  --t-42: rgba(var(--fg-rgb),.42);
  --t-40: rgba(var(--fg-rgb),.4);
  --t-35: rgba(var(--fg-rgb),.35);
  --t-32: rgba(var(--fg-rgb),.32);

  --b-02: rgba(var(--blue-rgb),.02);
  --b-05: rgba(var(--blue-rgb),.05);
  --b-07: rgba(var(--blue-rgb),.07);
  --b-10: rgba(var(--blue-rgb),.1);
  --b-12: rgba(var(--blue-rgb),.12);
  --b-16: rgba(var(--blue-rgb),.16);
  --b-22: rgba(var(--blue-rgb),.22);
  --b-30: rgba(var(--blue-rgb),.3);
  --b-40: rgba(var(--blue-rgb),.4);
  --b-55: rgba(var(--blue-rgb),.55);
  --b-70: rgba(var(--blue-rgb),.7);
  --b-85: rgba(var(--blue-rgb),.85);

  --warn-06: rgba(var(--warn-rgb),.06);
  --warn-12: rgba(var(--warn-rgb),.12);
  --warn-28: rgba(var(--warn-rgb),.28);

  --btn-primary-bg: var(--wasel-blue);
  --btn-primary-fg: var(--on-blue);
  --btn-secondary-bg: rgb(var(--fg-rgb));
  --btn-secondary-fg: rgb(var(--bg-rgb));

  --sh-white: 0 4px 20px rgba(var(--fg-rgb),.12);
  --glow-blue: 0 0 26px rgba(var(--blue-rgb),.22);
  --glow-strong: 0 0 30px rgba(var(--blue-rgb),.8);
}

/* a dark scope paints itself: background, dotted grid and text colour */
.theme-dark {
  color: rgb(var(--fg-rgb));
  background-color: var(--bg-base);
  background-image: radial-gradient(circle at 0px 0px, var(--grid-dot) 1.25px, transparent 1.25px);
  background-size: 32px 32px;
  background-position: calc(50% + 0.5px) 0px;
}

/* light scopes are flat: no neon text glows (glow belongs to the dark scenes) */
body *:not(.theme-dark, .theme-dark *) { text-shadow: none !important; }

/* ---- header actions (both pages): cart · primary CTA · menu ----
   One height (40px), one radius; only the primary CTA is filled. */
.hdr-actions { display: flex; align-items: center; gap: .5rem; }
.hdr-actions .wcart-btn,
.hdr-actions .hdr-menu-btn {
  width: 40px !important; height: 40px !important;
  display: inline-grid !important; place-items: center;
  padding: 0; border-radius: var(--r);
  background: transparent;
  border: 1px solid var(--hairline-3);
  color: rgb(var(--fg-rgb));
  cursor: pointer;
  transition: border-color .3s var(--ease-zetr), background .3s var(--ease-zetr);
}
.hdr-actions .wcart-btn:hover,
.hdr-actions .hdr-menu-btn:hover { border-color: var(--b-55); background: var(--b-07); }
.hdr-actions .hdr-menu-btn .icon { width: 22px; height: 22px; }
/* header primary — ghost while the hero (with its own primary) is on screen */
.hdr-actions .hdr-primary {
  display: none;
  align-items: center; justify-content: center; gap: .5rem;
  height: 40px; min-inline-size: 9.75rem; padding: 0 1.1rem;
  border: 0; border-radius: var(--r);
  background: var(--btn-primary-bg); color: var(--btn-primary-fg); border: 1px solid transparent;
  font: inherit; font-size: .8125rem; font-weight: 800; letter-spacing: -.035em;
  white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background .3s var(--ease-zetr), transform .3s var(--ease-zetr);
}
.hdr-actions .hdr-primary:hover { filter: brightness(1.08); }
html.has-hero:not(.is-past-hero) .hdr-actions .hdr-primary {
  background: transparent; color: rgb(var(--fg-rgb)); border-color: var(--hairline-3);
}
html.has-hero:not(.is-past-hero) .hdr-actions .hdr-primary .mob-edge rect { stroke: var(--wasel-blue); }
.hdr-actions .hdr-primary:active { transform: translateY(1px); }
.hdr-actions .hdr-primary:focus-visible,
.hdr-actions .wcart-btn:focus-visible,
.hdr-actions .hdr-menu-btn:focus-visible { outline: 2px solid var(--wasel-blue); outline-offset: 3px; }
.hdr-actions .hdr-primary .icon { width: 18px; height: 18px; }
@media (min-width: 640px) { .hdr-actions .hdr-primary { display: inline-flex !important; } }
@media (min-width: 1024px) { .hdr-actions .hdr-menu-btn { display: none !important; } }
@media (max-width: 400px) { .hdr-actions .wcart-btn, .hdr-actions .hdr-menu-btn { width: 44px !important; height: 44px !important; } }

/* ============================================================
   Dark Blue + Black Palette Family — no white background
   All palettes share deep midnight black and rich dark blue tones.
   ============================================================ */
:root { --stage: linear-gradient(180deg, var(--surface-1), var(--surface-2)); --bg-alt: var(--surface-1); }
.theme-dark { --stage: linear-gradient(180deg, var(--surface-2), var(--surface-1)); --bg-alt: var(--surface-1); }

/* dark (default) — midnight black base with electric azure blue */
html[data-palette="dark"], html:not([data-palette]) {
  --fg-rgb: 240,246,255; --bg-rgb: 3,7,18; --blue-rgb: 43,178,255; --warn-rgb: 251,146,60;
  --wasel-blue: #2bb2ff; --wasel-blue-700: #0284c7; --wasel-blue-200: #7dd3fc; --wasel-blue-50: #081a36; --warn: #fb923c;
  --bg-base: #030712; --bg-alt: #071329; --surface-1: #0a1936; --surface-2: #0e2246; --surface-deep: #02050e;
  --stage: linear-gradient(180deg, #0e2246 0%, #071329 100%);
  --grid-dot: rgba(56,189,248,.09);
  --tw-white: 240 246 255; --tw-black: 3 7 18;
}

/* sky / sapphire — deep ocean night with vivid cyan-blue */
html[data-palette="sky"] {
  --fg-rgb: 240,246,255; --bg-rgb: 4,11,24; --blue-rgb: 43,178,255; --warn-rgb: 251,146,60;
  --wasel-blue: #2bb2ff; --wasel-blue-700: #0284c7; --wasel-blue-200: #7dd3fc; --wasel-blue-50: #0a254a; --warn: #fb923c;
  --bg-base: #040b18; --bg-alt: #071630; --surface-1: #0a1d3d; --surface-2: #0f2750; --surface-deep: #020712;
  --stage: linear-gradient(180deg, #0f2750 0%, #071630 100%);
  --grid-dot: rgba(43,178,255,.09);
  --tw-white: 240 246 255; --tw-black: 4 11 24;
}

/* stone / onyx — pure midnight black with cold steel blue accents */
html[data-palette="stone"] {
  --fg-rgb: 236,242,250; --bg-rgb: 2,5,12; --blue-rgb: 56,189,248; --warn-rgb: 251,146,60;
  --wasel-blue: #38bdf8; --wasel-blue-700: #0284c7; --wasel-blue-200: #7dd3fc; --wasel-blue-50: #07152b; --warn: #fb923c;
  --bg-base: #02050c; --bg-alt: #050e1f; --surface-1: #08152c; --surface-2: #0c1e3d; --surface-deep: #010308;
  --stage: linear-gradient(180deg, #0c1e3d 0%, #050e1f 100%);
  --grid-dot: rgba(56,189,248,.08);
  --tw-white: 236 242 250; --tw-black: 2 5 12;
}

/* blue hour — deep twilight navy blue with glowing cobalt accents */
html[data-palette="bluehour"] {
  --fg-rgb: 236,242,250; --bg-rgb: 5,14,31; --blue-rgb: 86,190,255; --warn-rgb: 251,146,60;
  --wasel-blue: #56beff; --wasel-blue-700: #45b0f5; --wasel-blue-200: #93d6ff; --wasel-blue-50: #0d2547; --warn: #fb923c;
  --on-blue: #030712;
  --bg-base: #050e1f; --bg-alt: #081730; --surface-1: #0c2042; --surface-2: #102952; --surface-deep: #030814;
  --stage: linear-gradient(180deg, #102952 0%, #081730 100%);
  --grid-dot: rgba(86,190,255,.09);
  --tw-white: 236 242 250; --tw-black: 5 14 31;
}

/* alternate tone band: a quiet step between neighbouring light sections */
.tone-alt { background: var(--bg-alt); box-shadow: 0 0 0 100vmax var(--bg-alt); clip-path: inset(0 -100vmax); }

/* a standalone "N+" stat reads the same everywhere: number first, plus after */
.num-plus { direction: ltr; unicode-bidi: isolate; }

/* ---- one button system (v3) ----
   primary   = the single main action in a view: brand blue fill
   secondary = supporting action: ink fill
   ghost     = tertiary: outline only */
.btn-primary, .btn-secondary, .btn-ghost-line {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.75rem !important;
  min-height: 48px;
  padding: 0.85rem 1.85rem !important;
  border-radius: var(--r);
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s var(--ease-zetr);
}
.btn-primary {
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-fg) !important;
  border: 1px solid transparent !important;
}
.btn-primary:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(1px);
}
.btn-secondary {
  background: var(--btn-secondary-bg) !important;
  color: var(--btn-secondary-fg) !important;
  border: 1px solid var(--hairline-2) !important;
}
.btn-secondary:hover {
  background: var(--surface-2) !important;
  border-color: var(--b-55) !important;
  transform: translateY(-1px);
}
.btn-ghost-line {
  background: rgba(255, 255, 255, 0.03) !important;
  color: rgb(var(--fg-rgb)) !important;
  border: 1px solid var(--hairline-3) !important;
}
.btn-ghost-line:hover {
  border-color: var(--wasel-blue) !important;
  color: var(--wasel-blue) !important;
  background: var(--b-07) !important;
  transform: translateY(-1px);
}
.btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-ghost-line:focus-visible {
  outline: 2px solid var(--wasel-blue);
  outline-offset: 3px;
}

/* ---- mobile action bar (landing, < 640px, after the hero) ---- */
.m-cta-bar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 9400;
  display: none; gap: .5rem; align-items: center;
  padding: .625rem var(--frame-inset, 16px) calc(.625rem + env(safe-area-inset-bottom, 0px));
  background: rgba(var(--bg-rgb),.94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--hairline-2);
  transform: translateY(110%); transition: transform .45s var(--ease-zetr);
}
.m-cta-bar .m-cta-main {
  flex: 1; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: var(--r); font-size: .9rem; font-weight: 800; letter-spacing: -.035em; text-decoration: none;
}
.m-cta-bar .m-cta-main .icon { width: 18px; height: 18px; }
.m-cta-bar .m-cta-call {
  flex: none; width: 48px; height: 48px; display: inline-grid; place-items: center;
  border-radius: var(--r); border: 1px solid var(--hairline-3); color: rgb(var(--fg-rgb));
}
.m-cta-bar .m-cta-call .icon { width: 20px; height: 20px; }
@media (max-width: 639px) {
  .m-cta-bar { display: flex; }
  html.mcta-on .m-cta-bar { transform: none; }
  html.mcta-on .wasel-bot { bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }
  html.mcta-on .wcart-toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; }
  html.mcta-on body { padding-bottom: 72px; }
}
@media (prefers-reduced-motion: reduce) { .m-cta-bar { transition: none; } }
body.wcart-open .m-cta-bar, body.nav-open .m-cta-bar, body.modal-open .m-cta-bar { display: none !important; }