/* Packyard theme A: the one shared stylesheet for every customer page (design, 2026-10-27).
   Served at /order-assets/packyard-a.css?v=<hash> (src/brand.ts) with a 1-year immutable cache;
   /, /order, /thanks, the SEO/guide/legal/404 pages and the panel theme link this one URL.
   Spec: workspace design/system.md §7 "Theme A (live)". Values are the live theme-A values, so
   linking it changes nothing visible. Legacy names are aliased until each page moves to the
   semantic names (one commit per page). Components use only the semantic tokens. */

:root{
  /* colour: semantic */
  --bg:#14102e;            /* page */
  --bg-deep:#0f0c24;       /* inputs, wells, footer */
  --surface:#1e1846;       /* cards */
  --surface-2:#271f58;     /* hover + selected */
  --border:#3a3070;        /* decorative only */
  --border-strong:#7a6fc0; /* control edges, 3.82:1 on surface */
  --text:#f4f2ff;
  --muted:#bdb7dc;
  --primary:#6fcf4f;       /* the one action colour */
  --primary-hover:#8be06f;
  --primary-text:#8be06f;  /* green as text: links, prices */
  --on-primary:#10240a;
  --accent:#ffd166;        /* gold: "recommended" and highlights only; dark text on it */
  --focus:#8ec5ff;         /* lapis: keyboard focus only (audit: gold was doing 3 jobs) */
  --danger:#ff8a7a;
  --info:#8ec5ff;
  --grass:#3f8f2f;         /* ground strip under hero, footer */
  --grass-top:#5bb043;
  --sky-0:#14102e;--sky-1:#2c1f5c;--sky-2:#7b3f8f;--glow:#ffb36b;

  /* type */
  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-body:Figtree,system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --fs-display:clamp(40px,4.4vw,64px);
  --fs-h1:clamp(32px,4.6vw,52px);
  --fs-h2:clamp(28px,4vw,44px);
  --fs-h3:21px;
  --fs-lead:clamp(18px,2vw,21px);
  --fs-body:16px;--fs-small:14px;--fs-label:13px;

  /* space, layout */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s7:32px;--s8:48px;--s9:64px;--s10:96px;
  --wrap:1160px;--g:20px;--nav-h:64px;

  /* shape: cards are square-edged in theme A; buttons get the stepped block corner */
  --r-0:0;--r-sm:6px;--r-md:10px;--step:4px;--step-lg:6px;
  --edge-ring:0 0 0 1px var(--border);
  --sel-ring:0 0 0 3px var(--primary);
  --btn-bevel:inset 0 -4px 0 rgba(0,0,0,.22),inset 0 3px 0 rgba(255,255,255,.28);

  /* motion */
  --t-1:120ms;--t-2:200ms;--t-3:360ms;--ease:cubic-bezier(.2,.7,.2,1);

  /* legacy aliases (landing lib/v2.mjs CSS_A), removed page by page */
  --deep:var(--bg-deep);--card:var(--surface);--card2:var(--surface-2);--line:var(--border);
  --grass2:var(--primary-hover);--gold:var(--accent);--on:var(--on-primary);
  --display:var(--font-display);--body:var(--font-body);--mono:var(--font-mono);
  --sky0:var(--sky-0);--sky1:var(--sky-1);--sky2:var(--sky-2);
  /* legacy alias (storefront-theme 'a') */
  --edge:#5a4f99;
}

/* shared primitives */
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}