:root {
  color-scheme: dark;
  --ink-950:#0E0E11; --ink-900:#17171C; --ink-850:#1F1F26; --ink-800:#2A2A33; --ink-700:#3A3A46;
  --stone-500:#8F8A82; --stone-400:#9C9790; --stone-300:#B4AFA6; --stone-100:#F4F1EA;
  --gold-500:#E5C05E; --gold-400:#F0D27F; --gold-200:#FFF1B0; --gold-700:#B89030;
  --green-400:#4ADE80; --amber-400:#FBBF24; --red-400:#F87171; --blue-400:#60A5FA;
  --color-bg-page:var(--ink-950); --color-bg-surface:var(--ink-900); --color-bg-raised:var(--ink-850); --color-bg-media:#000000; --color-bg-media-skeleton:#17171C; --color-bg-media-shimmer:linear-gradient(90deg,#17171C 0,#1F1F26 50%,#17171C 100%);
  --color-text-primary:var(--stone-100); --color-text-secondary:var(--stone-300); --color-text-tertiary:var(--stone-400); --color-text-accent:var(--gold-500);
  --color-action-primary:var(--gold-500); --color-action-primary-hover:var(--gold-400); --color-on-primary:#111111;
  --color-border-subtle:var(--ink-800); --color-border-control:var(--stone-500); --color-focus-ring:var(--gold-200);
  --color-status-success:var(--green-400); --color-status-warning:var(--amber-400); --color-status-danger:var(--red-400); --color-status-info:var(--blue-400); --color-scrim:rgba(0,0,0,.64);
  --font-sans:-apple-system,"PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
  --text-display:800 28px/38px var(--font-sans); --text-h1:700 22px/30px var(--font-sans); --text-h2:700 20px/28px var(--font-sans); --text-h3:600 15px/22px var(--font-sans);
  --text-price-lg:800 26px/34px var(--font-sans); --text-price:700 18px/26px var(--font-sans); --text-body:400 16px/26px var(--font-sans); --text-body-sm:400 14px/22px var(--font-sans); --text-label:600 14px/20px var(--font-sans); --text-caption:500 12px/16px var(--font-sans);
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;
  --space-page-x:20px; --space-section:32px; --space-card:12px; --space-grid:12px;
  --size-content:1200px; --size-header:56px; --size-touch:44px; --size-control:48px; --size-fab:56px; --size-fab-sm:48px;
  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-full:999px;
  --shadow-1:0 1px 2px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.04); --shadow-2:0 8px 24px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06); --shadow-3:0 16px 48px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08);
  --motion-fast:120ms; --motion-base:200ms; --motion-slow:280ms; --ease-out:cubic-bezier(.05,.7,.1,1); --ease-in:cubic-bezier(.3,0,.8,.15);
  /* Compatibility aliases for the existing storefront and checkout. */
  --gold-main:var(--color-text-accent); --gold-light:var(--color-focus-ring); --gold-dark:var(--color-action-primary); --bg-dark:var(--color-bg-page); --card-bg:var(--color-bg-surface); --border-color:var(--color-border-subtle); --color-danger:var(--color-status-danger);
}
@media(min-width:1024px){:root{--text-display:800 40px/52px var(--font-sans);--text-h1:700 28px/38px var(--font-sans);--text-h2:700 22px/30px var(--font-sans);--text-h3:600 16px/24px var(--font-sans);--text-price-lg:800 28px/36px var(--font-sans);--text-price:700 20px/28px var(--font-sans);--size-header:72px}}
html{scroll-padding-top:calc(var(--size-header) + 8px);scroll-padding-bottom:calc(112px + var(--space-8) + env(safe-area-inset-bottom))}
:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}
@media(prefers-reduced-motion:reduce){:root{--motion-base:var(--motion-fast);--motion-slow:var(--motion-fast)}}

@media(min-width:768px){:root{--space-page-x:24px;--space-section:40px;--space-card:16px;--space-grid:16px}}
@media(min-width:1280px){:root{--space-page-x:max(40px, (100vw - 1200px)/2)}}

@media(min-width:1024px){:root{--space-section:48px}}