/* iShopX design tokens: the SystemX theme from UI_ROUGH_FINAL_RC1_B2 (UIR-BR-01..07, UIR-THM-01..04).
   Values are the 806 tokens verbatim. Components use these names only; no literal colour outside this file
   (tools/check_tokens.py enforces it and the contrast pairs). Red means act: the primary action only.
   Work surfaces are paper; the header, footer and hero are device black. */
:root{
  /* surfaces and lines */
  --carousel-bg:#F5F5F7; --carousel-edge:#E8E8ED; --carousel-ink:#1D1D1F;
  --carousel-shadow:0 4px 24px rgba(0,0,0,.02); --carousel-shadow-hover:0 12px 32px rgba(0,0,0,.04);
  --carousel-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --paper:#ffffff; --card:#ffffff; --surf2:#fafafa; --surf3:#f5f5f5;
  --edge:#e5e5e5; --edge2:#d4d4d4;
  /* text */
  --text:#0b0b0b; --text2:#222222; --dim:#525252; --faint:#656565; --on-red:#ffffff;
  /* signal */
  --red:#E10600; --red-hot:#FF2A1E; --red-deep:#B50500; --shadow-red:0 12px 24px -12px rgba(225,6,0,.65);
  --amber:#B4700E; --amber-tint:#FBF1E2; --amber-edge:#E8CFA0;
  --ok:#1a7f37; --bad:#D92D20; --info:#2563eb;
  --ok-tint:#E3F1E5; --ok-ink:#14532d; --amber-ink:#5c3a05; --bad-ink:#7c1a12;
  /* device black: header, hero, footer */
  --chrome:#0a0a0a; --chrome2:#121212; --chrome-line:#242424; --chrome-line2:#333333;
  --chrome-text:#ffffff; --chrome-dim:#b8b8b8; --chrome-faint:#8f8f8f;
  --scrim:rgba(0,0,0,.45); --focus:#E10600;
  /* shape, depth, motion */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-pill:999px;
  --shadow-sm:0 12px 28px -22px rgba(0,0,0,.15); --shadow-md:0 14px 34px -24px rgba(0,0,0,.18);
  --shadow-dark:0 20px 36px -24px rgba(0,0,0,.5); --edge-hi:inset 0 1px 0 rgba(255,255,255,.07); --shadow-photo:0 16px 36px -14px rgba(0,0,0,.8);
  /* SystemX family (iShopX.ai storefront): soft graphite layers, satin controls, recessed fields. Inert on the legacy store. */
  --graphite:#1a1a1a; --graphite-hi:#2c2c2c; --satin-top:#333333; --satin-bot:#0d0d0d;
  --satin:linear-gradient(180deg,var(--satin-top),var(--satin-bot));
  --satin-light-top:#ffffff; --satin-light-bot:#f0f0f0;
  --satin-light:linear-gradient(180deg,var(--satin-light-top),var(--satin-light-bot));
  --edge-hi-light:inset 0 1px 0 rgba(255,255,255,.9); --recess:inset 0 1px 2px rgba(0,0,0,.09),inset 0 0 0 1px rgba(0,0,0,.02);
  --shadow-btn:0 1px 2px rgba(0,0,0,.2),0 10px 18px -12px rgba(0,0,0,.45); --shadow-soft:0 1px 2px rgba(0,0,0,.06),0 12px 26px -20px rgba(0,0,0,.3);
  --ease:cubic-bezier(.16,1,.3,1); --dur-micro:150ms; --dur-normal:250ms; --touch-min:44px;
  /* type */
  --font-sans:'Open Sans','Helvetica Neue',Arial,sans-serif;
  --font-display:'Space Grotesk','Open Sans',Arial,sans-serif;
  --font-mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
  /* Handi Ma'am intro (its own brand, not SystemX) */
  --hm-paper:#F7F1E8; --hm-ink:#1C1917; --hm-photo-bg:#1d1c1b; --hm-shadow:0 18px 40px rgba(28,25,23,.18);
  /* shop names (store.css reads these) */
  --bg:var(--paper); --surface:var(--card); --ink:var(--text); --muted:var(--dim); --line:var(--edge);
  --chip:var(--surf3); --brand:var(--red); --brand-ink:var(--on-red); --brand-soft:var(--surf3);
  --dark:var(--chrome); --dark-ink:var(--chrome-text); --radius:var(--r-md); --shadow:none;
}