/* Sassy Savitry — STOREFRONT theme tokens ("4b")
   Source of truth: the dark-plum checkout / account shell (option 4b) in
   Website.dc.html & Site Pages.dc.html. This is the single canonical theme
   for every storefront surface — home, listing, product, cart, checkout,
   account, about, FAQ. Built on the warm-wine brand roles in colors.css. */

:root {
  /* ---- storefront grounds (deepest → raised) ---- */
  --sf-bg: #1C0F1E;              /* page backdrop behind every screen */
  --sf-surface: #2A1430;         /* solid card / panel ground */
  --sf-surface-raised: #35193B;  /* raised card, hover, sticky bars */
  --sf-surface-hi: #4A2650;      /* top of the signature radial, chips, wells */
  --sf-well: rgba(243, 217, 211, 0.06);  /* inset field / image well on dark */

  /* the signature raised-card gradient used on auth & summary cards */
  --sf-card-grad: radial-gradient(120% 120% at 50% 0%, #4A2650 0%, #35193B 55%, #2A1430 100%); /* @kind color */

  /* ---- gold framing on dark ---- */
  --sf-gold: #B9863C;            /* primary metal — CTAs, rules */
  --sf-gold-hi: #CEAA76;         /* lightened foil — accents, links, active state */
  --sf-border: rgba(206, 170, 118, 0.28);  /* standard gold hairline on dark */
  --sf-border-soft: rgba(206, 170, 118, 0.18);
  --sf-border-strong: rgba(206, 170, 118, 0.45);

  /* ---- type on dark ---- */
  --sf-text: #F3D9D3;            /* primary blush copy & headlines */
  --sf-text-muted: rgba(243, 217, 211, 0.6);   /* sub-copy, helper */
  --sf-text-faint: rgba(243, 217, 211, 0.4);   /* captions, disabled */

  /* ---- functional accents ---- */
  --sf-success: #7FB09A;         /* in-stock / confirmed (desaturated to sit on plum) */
  --sf-sale: #D98A8A;            /* price-drop / limited (blush-red, not alarm red) */

  /* ---- radii & shadow (storefront scale) ---- */
  --sf-radius-sm: 8px;
  --sf-radius: 14px;
  --sf-radius-lg: 20px;
  --sf-radius-pill: 999px;
  --sf-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.7);
  --sf-shadow-card: 0 18px 44px -26px rgba(0, 0, 0, 0.6);

  /* ---- layout ---- */
  --sf-maxw: 1280px;
  --sf-gutter: 44px;
  --sf-gutter-mobile: 20px;
}