/*
 * VirtualTry brand system — canonical tokens.
 *
 * Source of truth: specs/brand/VirtualTry-Brand-System.html (§02 Colour,
 * §03 Typography, §04 Components). Every hex below is transcribed
 * character-for-character from that file's own `:root{...}` custom
 * properties (line 529) — do not re-eyeball colours from screenshots or
 * swatches; diff against that file if this ever drifts.
 *
 * Scope (specs/23-brand-system-tokens.md, "Decision" section — taken with
 * the user, 2026-08-28): this file governs the Shopify admin (spec 24) and
 * storefront chrome the plugin owns — floating pill, collection-card
 * buttons, PDP button defaults (spec 25) — plus app-listing/marketing
 * surfaces (favicon, app icon, README headers). It does NOT govern the SDK
 * try-on stage: spec 05's T3 decision stands, and the stage keeps its own
 * `--vt-stage-*`/`--vt-panel-*` tokens (tryon-sdk/src/styles/vt-theme.css).
 *
 * `--vtb-` prefix, deliberately distinct from the SDK's `--vt-` so the two
 * token systems can never be confused in a grep or accidentally cascade
 * into each other. If you ever see a file defining both prefixes for the
 * same purpose, that's a bug — see this spec's acceptance criteria.
 *
 * Canonical location (task 2): a plain CSS file in the Shopify repo
 * (`virtualtry-latest`), which is where specs 24 and 25 both live. This is
 * the spec's own recommended answer, adopted as-is — a shared npm package
 * for two eventual consumers (this repo + WooCommerce, later, per spec 26)
 * is overhead this project doesn't need yet. When Woo needs these values,
 * copy this file there with a comment naming *this* file as canonical
 * (don't hand-derive a second copy from the brand HTML).
 *
 * ---------------------------------------------------------------------
 * THIS FILE IS THE COPY (spec 32 task 1). Canonical source:
 * `virtualtry-latest/app/styles/brand-tokens.css`. This `:root` block is
 * byte-identical to that file's — verified by a mechanical diff (spec 32's
 * Log has the diff command and its empty output). If this ever drifts,
 * re-copy from the canonical file; don't hand-edit a value here first.
 * ---------------------------------------------------------------------
 */

:root {
  /* ---- Core ---- */
  --vtb-bg: #F7F4EC;
  --vtb-bg-deep: #ECE6D5;
  --vtb-surface: #FFFFFF;
  --vtb-ink: #0A0A09;
  --vtb-ink-2: #1F1E1B;
  --vtb-muted: #6B6961;
  --vtb-muted-2: #A09C90;
  --vtb-hairline: #E0D9C5;
  --vtb-hairline-2: #CFC6AC;
  --vtb-accent: #FF3D00;
  --vtb-accent-2: #C8FF00;
  --vtb-accent-soft: #FFE0D2;
  --vtb-accent-deep: #B82500;
  --vtb-positive: #00A85A;

  /* ---- Shape ---- */
  --vtb-radius: 14px;
  --vtb-radius-lg: 18px;
  --vtb-radius-pill: 999px;

  /* The brand's one signature interaction (§04). Appears ONLY on the
   * primary button and the eyebrow pill — see "Misuse rules" below. */
  --vtb-shadow-signature: 4px 4px 0 var(--vtb-accent);
  --vtb-shadow-signature-hover: 6px 6px 0 var(--vtb-accent);

  --vtb-transition: .2s ease;

  /* ---- Type (task 3/4 below) ---- */
  --vtb-font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --vtb-font-serif: 'Instrument Serif', Georgia, serif;
  --vtb-font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --vtb-font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/*
 * ---------------------------------------------------------------------
 * Type loading strategy (task 4) — decided once, here, so specs 24 and 25
 * don't each invent one.
 *
 * ADMIN (spec 24): inject a single Google Fonts <link> in `root.jsx`'s
 * <head> for all four faces this file declares (Bricolage Grotesque
 * 700/800, Instrument Serif 400 italic, Geist + Geist Mono). This mirrors
 * spec 05's SDK-catalog-mode approach and is safe here specifically because
 * the admin renders inside Shopify's own iframe — it is not subject to a
 * merchant's CSP, and Polaris already performs the same kind of external
 * font fetch (root.jsx already links
 * https://cdn.shopify.com/static/fonts/inter/v4/styles.css for Inter,
 * which the brand system does not use and this file does not replace —
 * Inter stays wherever Polaris components still need it).
 *
 * STOREFRONT CHROME (spec 25, and Woo's spec 33): needs at most ONE of
 * these families, ever. Checked directly against the brand system's own
 * §04 Components CSS (VirtualTry-Brand-System.html): `.btn` and `.pill` —
 * the floating pill, collection-card buttons and PDP button all render as
 * one of these two — both set `font-family:var(--sans)`, i.e. Geist, with
 * NO component using `--display` (Bricolage Grotesque) or `--serif`
 * (Instrument Serif). Those two are editorial/headline faces the brand
 * system never puts on an interactive control. `--vtb-font-mono` (Geist
 * Mono) is used only by `.badge` — load it only if a Live/New-style badge
 * actually ships, not preemptively.
 *
 * So: don't link all four families onto the storefront. Load a
 * single-family Google Fonts link for Geist alone (400/500 — the weights
 * `.btn`/`.pill` actually use), or skip the fetch entirely and rely on the
 * system fallback stack declared in `--vtb-font-sans` above (spec 25's own
 * outcome on Shopify: no webfont loaded at all, 0 added bytes — spec 32
 * task 6 carries that same rule into this repo). Either is acceptable;
 * loading three or four unused display/serif families onto a merchant's
 * storefront for one pill is not.
 *
 * Licence position (stated explicitly, per spec 05's precedent): Bricolage
 * Grotesque, Instrument Serif and Geist/Geist Mono are all served via
 * Google Fonts under the Open Font License, which permits both a Google
 * Fonts <link> and self-hosted @font-face bundling. Every declaration above
 * carries a real system-font fallback (Georgia for the serif, system-ui/
 * -apple-system stacks for the rest) so a CSP-blocked or offline load still
 * degrades legibly rather than to the browser default serif.
 * ---------------------------------------------------------------------
 */

/*
 * ---------------------------------------------------------------------
 * Misuse rules (task 6) — written where an implementer of spec 33/35/37/38
 * will actually hit them, since they open this file before they open the
 * full brand system HTML.
 *
 * 1. ONE primary button per view. `.btn--primary` (ink fill, offset accent
 *    shadow) is the loudest thing on a screen — a second one competes with
 *    itself. Use `.btn--ghost`/`.btn--accent` (no signature shadow) for
 *    every other action.
 * 2. The signature `--vtb-shadow-signature` (4px 4px 0 accent, deepening to
 *    6px 6px 0 on hover) appears ONLY on the primary button and the
 *    eyebrow pill. It is not a general-purpose card/panel shadow.
 * 3. White type on orange, NEVER ink-on-orange. `--vtb-accent` panels are
 *    for short statements only (a marquee, a callout, a single CTA band) —
 *    body copy does not go on solid orange.
 * 4. `--vtb-accent-2` (Volt) is never used for text — chips, dots and
 *    "new" badges only.
 * 5. One italic-serif (`--vtb-font-serif`) emphasis per headline. Two reads
 *    as a pattern; three reads as noise. It is an accent voice, not a body
 *    face — never used for paragraphs.
 * 6. Display type (`--vtb-font-display`) never drops below weight 700 —
 *    the medium weights read as a different brand entirely.
 * 7. The mark (BrandMark): never stretch, rotate, recolour, or add a drop
 *    shadow to it. Reversed variant only on ink/dark surfaces; never invent
 *    a third colourway.
 * ---------------------------------------------------------------------
 */