/* ══════════════════════════════════════════════════════════════════
   SCHIR — Design Tokens (Phase 87-01 light rewrite)
   Single source of truth for the canonical light palette, editorial
   atoms, button system, card bases, and badge. Light system: cream
   ground, ink chrome, lone Alpine Blue accent (Toby-ruled, mockup D —
   see 87-CONTEXT.md "Ground & accent system", locked, do not re-litigate).

   Loaded on every page via head.njk BEFORE the page-specific stylesheet.
   shared.css no longer declares its own :root — tokens.css is the
   single token source (Phase 87 surgery).
   ══════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   1 · :ROOT — light system tokens (brand/palette.md + 87-UI-SPEC.md)
   ════════════════════════════════════════════════════════════════════ */
:root{
  /* ── Core palette (locked) ── */
  --ground:      #faf6ec;  /* page ground — light cream, the 60% dominant surface */
  --well:        #f2e8d0;  /* Cream Ivory — product wells, cards, secondary surfaces */
  --ink:         #12100d;  /* type + ALL chrome: buttons, bands, eyebrows, prices — never lift */
  --ink-soft:    rgba(18,16,13,.72);  /* mid-emphasis text */
  --ink-faint:   rgba(18,16,13,.5);   /* low-emphasis — large text (>=24px) / decorative ONLY */
  --accent:      #12598d;  /* Alpine Blue — the LONE accent; sanctioned roles only, see DESIGN.md */
  --hairline:    rgba(18,16,13,.12); /* dividers/rules — decorative only, not form-field borders */

  /* ── Layout / motion tokens ── */
  --maxw:        1180px;
  --maxw-wide:   1440px;
  --gutter:      clamp(20px, 4vw, 48px);
  --announce-h:  40px;
  --nav-h:       64px;
  --ease:        cubic-bezier(0.65, 0.01, 0.05, 0.99);
  --cubic-main:  var(--ease); /* legacy alias — shared.css nav/menu transitions consume this name */

  /* ── Spacing scale (8-point family, all multiples of 4) ── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --s-6: 48px;
  --s-7: 64px;
  --s-8: 96px;
  --s-9: 128px;

  /* ── Font stacks ── */
  --serif:       "Cormorant Garamond", Georgia, serif;
  --display:     var(--serif); /* legacy display face retired — remapped so consumers inherit serif */
  --sans:        "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ── Legacy aliases — consumed by the UNMODIFIED Klaviyo include's inline
     styles and stragglers; remove only after a grep proves zero var() consumers. ── */
  --cream:       var(--well);
  --white:       var(--ink);       /* old "readable text" var → ink-on-cream */
  --gold:        var(--ink);       /* old accent chrome → ink chrome */
  --type:        var(--ink);
  --type-dim:    var(--ink-soft);
  --type-faint:  var(--ink-faint);

  /* The extended illustration hues (indigo / persimmon / ochre / pine / the red
     earth tone) are NOT declared here. A repo-wide grep proved zero var()
     consumers, and one of them collided with this phase's red-punch ban grep.
     They are paint, never UI chrome — their canonical record is the ART-ONLY
     block in DESIGN.md, which is where art direction reads them from. */
}

@media(max-width:700px){
  :root{ --nav-h: 56px; }
}

/* ════════════════════════════════════════════════════════════════════
   2 · EYEBROW — editorial label atom. Inter (off the retired display
   face) per the light-system Label type spec.
   ════════════════════════════════════════════════════════════════════ */
.eyebrow{
  font-family:var(--sans);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;color:var(--ink);opacity:1;display:block;text-align:center;
}

/* ════════════════════════════════════════════════════════════════════
   3 · FOCUS-VISIBLE — global keyboard-focus ring (sanctioned accent role)
   ════════════════════════════════════════════════════════════════════ */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* ════════════════════════════════════════════════════════════════════
   4 · BUTTON ATOMS — light-system primary (.btn-ink) + ghost (.btn-ghost);
   .btn-line supplies the shared hover register (translateY + shadow lift).
   Sharp rectangles site-wide — radius-0 ruling.
   ════════════════════════════════════════════════════════════════════ */
.btn-line{
  font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border-radius:0;
  transition:transform .25s var(--ease), box-shadow .25s, background .25s, color .25s, border-color .25s, gap .25s;
}
.btn-line .arr{ font-style:normal;transition:transform .25s var(--ease); }
.btn-line:hover{ transform:translateY(-2px);box-shadow:0 10px 26px rgba(18,16,13,.16); }
.btn-line:hover .arr{ transform:translateX(4px); }

.btn-ink{
  background:var(--ink);color:var(--ground);
  padding:16px 40px;border:none;
}
.btn-ink:hover{ background:var(--ink); }

/* Secondary register = a DRAWN outline: 2px full-strength ink, not a faint
   hairline. Radius stays 0 — SCHIR's sharp-rectangle ruling, explicitly not
   the pill this register is borrowed from. */
.btn-ghost{
  background:transparent;color:var(--ink);
  border:2px solid var(--ink);
  padding:12px 28px;
}
.btn-ghost:hover{ background:var(--ink);color:var(--ground);border-color:var(--ink); }

/* ════════════════════════════════════════════════════════════════════
   5 · .card-product — consolidated product card base (D-03)
   Covers: drop-card, five-card, supp-sku, bev-flavor
   ════════════════════════════════════════════════════════════════════ */
.card-product{
  display:flex;flex-direction:column;
  border-radius:0;overflow:hidden;
  background:var(--well);
  border:1px solid var(--hairline);
  transition:transform .35s var(--ease), border-color .35s;
}
.card-product:hover{
  border-color:rgba(18,16,13,.24);
}

/* ════════════════════════════════════════════════════════════════════
   6 · .card-nav — consolidated navigation card base (D-03)
   Covers: pillar cards (frame-cell stripped in Plan 02)
   ════════════════════════════════════════════════════════════════════ */
.card-nav{
  display:block;
  border-radius:0;
  background:var(--well);
  border:1px solid var(--hairline);
  transition:transform .3s var(--ease), border-color .3s;
}
.card-nav:hover{
  border-color:rgba(18,16,13,.24);
}
.card-nav .arr{
  font-style:normal;
  transition:transform .25s var(--ease), opacity .25s;
}
.card-nav:hover .arr{
  opacity:1;
  transform:translateX(4px);
}

/* ════════════════════════════════════════════════════════════════════
   8 · UNIFIED .badge — product-availability badge (D-02)
   Replaces .supp-sku-badge, .sku-status, .bev-flavor-chip as a base.
   Gold chrome border retired — hairline + ink dot, radius-0.
   ════════════════════════════════════════════════════════════════════ */
.badge{
  position:absolute;top:14px;left:14px;z-index:2;
  font-family:var(--sans);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;color:var(--ink);
  background:var(--well);border:1px solid var(--hairline);
  padding:5px 11px;border-radius:0;
  box-shadow:0 2px 8px rgba(18,16,13,.10);
}
.badge--soon::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--ink);margin-right:7px;vertical-align:middle;
}