/* Both stores use the same approved storefront palette and surfaces. */
:root {
  color-scheme: dark;
  --ph-primary: #06bfff;
  --ph-secondary: #2d73ff;
  --ph-accent: #8e44ad;
  --ph-dark: #1b2838;
  --ph-darker: #171c24;
  --ph-darkest: #0a0f1a;
  --ph-shell-background: #0f1115;
  --ph-shell-glow: radial-gradient(circle at 15% 50%,rgba(6,191,255,.08) 0%,transparent 25%),radial-gradient(circle at 85% 30%,rgba(157,78,221,.08) 0%,transparent 25%);
  --ph-page-background: linear-gradient(135deg,#0a0f1a 0%,#1a1f2e 50%,#0d1320 100%);
  --ph-page-hero: var(--ph-page-background);
  --ph-page-band: linear-gradient(110deg,
    color-mix(in srgb,var(--ph-primary) 6%,var(--ph-darkest)),
    color-mix(in srgb,var(--ph-accent) 7%,var(--ph-darkest)));
  --ph-text: #f7fafc;
  --ph-muted: #a0aec0;
  --ph-line: rgba(255,255,255,.08);
  --ph-scroll-track: #12171f;
  --ph-scroll-thumb: #9189b6;
  --ph-rgb-cyan: #66bfd5;
  --ph-rgb-purple: #9180db;
  --ph-rgb-pink: #d486b9;
  --ph-rgb-green: #77cbb3;
  --ph-rgb-line: linear-gradient(90deg,var(--ph-rgb-cyan),var(--ph-rgb-purple),var(--ph-rgb-pink),var(--ph-rgb-green));
  --ph-focus-line: rgba(151,170,198,.7);
  --ph-scroll-thumb-hover: #929daa;
  --ph-display: 'Outfit', sans-serif;
  --ph-body: 'Inter', sans-serif;
  --ph-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --ph-success: #48bb78;
  --ph-warning: #ed8936;
  --ph-error: #f56565;
  --ph-footer-bg: #1f2134;
  --ph-action-ink: #ffffff;
  --bg: var(--ph-darkest);
  --page: var(--ph-darkest);
  --surface: var(--ph-darker);
  --soft: var(--ph-dark);
  --ink: var(--ph-text);
  --muted: var(--ph-muted);
  --brand: var(--ph-primary);
  --brand-dark: var(--ph-secondary);
  --brand-contrast: var(--ph-action-ink);
  --line: var(--ph-line);
  --lilac: #28233a;
  --peach: #342b20;
  --gold: var(--ph-warning);
  --error: var(--ph-error);
  --shadow: 0 16px 50px #0002;
  --radius: 14px;
  --wide: 1280px;
  --font: var(--ph-body);
}

/* Native page scrolling: compact dark track, rounded thumb, no JS scrolling layer. */
html { scrollbar-width:thin;scrollbar-color:var(--ph-scroll-thumb) var(--ph-scroll-track); }
@supports selector(::-webkit-scrollbar) {
  html { scrollbar-width:auto;scrollbar-color:auto; }
  html::-webkit-scrollbar { width:10px;height:10px; }
  html::-webkit-scrollbar-track,html::-webkit-scrollbar-corner { background:var(--ph-scroll-track); }
  html::-webkit-scrollbar-thumb { min-height:48px;border:2px solid var(--ph-scroll-track);border-radius:10px;background:linear-gradient(180deg,var(--ph-rgb-cyan),var(--ph-rgb-purple),var(--ph-rgb-pink),var(--ph-rgb-green));background-clip:padding-box; }
  html::-webkit-scrollbar-thumb:hover { border-width:1px; }
}