/* Beauty Supply design tokens - the one shared source for every storefront page (BS-04 owns this file).
   Values from projects/beauty-supply/shop/design/DESIGN.md (owner decisions 2026-10-06 win over the static code).
   Fonts: the layout loads Anuphan 400/500/600, IBM Plex Sans Thai 400/500, Instrument Sans 500/700 from Google Fonts.
   Glass engine config lives in shop/design/GLASS-SPEC.md; .bs-glass below is its no-engine fallback. */
:root{
  --bg:#FFFFFF;
  --ink:#12333D;
  --text:#222222;
  --mute:#666666;
  --soft:#767676;
  --atc:#C5D7E1;            /* every button and selected-state fill; product photo backdrop */
  --atc-h:#B4CAD6;          /* button hover */
  --mist:#C5D7E1;
  --mist-hover:#B4CAD6;
  --btn-ink:#0F2F38;        /* text on --atc */
  --aqua:#B4DFE8;
  --accent:#76BBCA;         /* glass tint, carousel progress */
  --wash:#E4F4F7;
  --wash-ink:#246A78;
  --studio:#CDDBE4;         /* product gallery well */
  --rule:#E2E2E2;
  --line:#B4B4B4;
  --card-line:#E3ECEF;
  --well:#F2F2F2;
  --line-green:#06C755;     /* LINE button only */
  --ok:#2F7A43;  --ok-wash:#E3F1E6;
  --sale:#B4231F; --sale-wash:#F8E6E5;
  --wait:#7A4B00; --wait-wash:#FFF1D6;
  --done:#79BFCE;
  --todo:#D6E6EC;
  --aq-deep:radial-gradient(90% 160% at 20% -20%,rgba(186,228,236,.8),rgba(186,228,236,0) 60%),linear-gradient(100deg,#A5DDE7 0%,#90D1DE 50%,#79BFCE 100%);
  --aq-light:radial-gradient(110% 130% at 15% -15%,rgba(186,228,236,.9),rgba(186,228,236,0) 55%),linear-gradient(160deg,#AADAE2 0%,#98D2DE 50%,#82C4D2 100%);

  --head:"Anuphan",system-ui,sans-serif;
  --body:"IBM Plex Sans Thai","Anuphan",system-ui,sans-serif;
  --mark:"Instrument Sans",system-ui,sans-serif;

  --r:26px;                 /* cards, panels */
  --r-pill:36px;            /* buttons, chips, badges */
  --r-sm:14px;              /* wells, fields */
  --wrap:1200px;
  --gutter:clamp(16px,3vw,32px);
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow-chip:5px 6px 5px -2px rgba(16,22,34,.19);
  --shadow-card:5px 6px 6px -2px rgba(16,22,34,.19);
}

/* Shared primitives, prefixed so they never collide with page CSS. */
.bs-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:var(--r-pill);border:1.5px solid var(--atc);background:var(--atc);color:var(--btn-ink);font:500 .96875rem var(--head);white-space:nowrap;cursor:pointer;transition:background .2s var(--ease),border-color .2s var(--ease),transform .15s}
.bs-btn:hover{background:var(--atc-h);border-color:var(--atc-h)}
.bs-btn:active{transform:scale(.97)}
.bs-btn.ghost{background:transparent;border-color:rgba(18,51,61,.18);color:var(--ink)}
.bs-btn.line{background:var(--line-green);border-color:var(--line-green);color:var(--btn-ink)}
.bs-glass{background:rgba(255,255,255,.46);border:1px solid rgba(255,255,255,.7);-webkit-backdrop-filter:blur(10px) saturate(2);backdrop-filter:blur(10px) saturate(2)}
.bs-num{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.bs-btn{transition:none}}