/* Self-hosted Inter (UI refresh PR-0 §3.7) — replaces the export's Google Fonts <link>.
   Latin subset, woff2, served from wwwroot/fonts. The embedded app is an iframe in
   the Shopify admin; an external font that is blocked or slow would shift every number.
   400/500/600 are Inter 4.001 (rsms/inter); 500 from the official v4.1 release. */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/inter-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/inter-latin-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/inter-latin-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* WhatBox MCF — design tokens v1
   Load before components.css. Everything is a custom property on :root;
   dark mode overrides live in the prefers-color-scheme block at the bottom.
   Naming: --wb-<group>-<name>. */

:root {
  /* ─── Brand ─────────────────────────────────────────────────────── */
  --wb-brand:        #5B44E4; /* links, focus ring, selected/current states, wizard rail, active tab underline, range fill */
  --wb-brand-hover:  #4A35C9; /* link hover */
  --wb-brand-soft:   #EEEBFB; /* brand chip bg, current-step halo, add-row bg, selected radio card bg, billing banner bg */
  --wb-brand-ink:    #3F2DB0; /* text on brand-soft (chips ACTIVE / 4/7) */
  --wb-gold:         #8A6A12; /* every savings amount (stat, reveal, backtest). Only gold that touches text. */
  --wb-gold-soft:    #FBF3D9; /* gold stat rail bg tint (rarely used) */
  --wb-gold-mark:    #F5A800; /* decorative only: mascot / app icon. Never carries a number. */

  /* ─── Decision states (text + bg + line triplets) ───────────────── */
  --wb-good:         #0E7A4B; /* "MCF wins", ON, VERIFIED, saved, done step, positive delta */
  --wb-good-bg:      #E7F4EC;
  --wb-good-line:    #B5DDC6;
  --wb-inh:          #3E4B66; /* "In-house", info banner icon, MANUAL source chip */
  --wb-inh-bg:       #EDF0F6;
  --wb-inh-line:     #C9D1E1;
  --wb-warn:         #A85E08; /* "Needs your call", placeholder dims rows, NOT SET, unmapped, low stock */
  --wb-warn-bg:      #FBF0E1;
  --wb-warn-line:    #EDD3A8;
  --wb-crit:         #BF3A2C; /* "No option", below-Amazon rows, errors, losses, destructive */
  --wb-crit-bg:      #FBEBE9;
  --wb-crit-line:    #F0C4BE;

  /* ─── Ink (text) ────────────────────────────────────────────────── */
  --wb-ink:          #1D1C2B; /* body, titles, primary button bg */
  --wb-ink2:         #5D5F76; /* status lines, helper text, table head, labels */
  --wb-ink3:         #6E7089; /* tertiary: mono captions, placeholders, dividers text, "—" */
  --wb-ink-inv:      #FFFFFF; /* text on ink / on state solids */

  /* ─── Surfaces & lines ──────────────────────────────────────────── */
  --wb-page:         #F1F1F4; /* page bg (matches Shopify admin) */
  --wb-surf:         #FFFFFF; /* cards, inputs, toolbar */
  --wb-surf2:        #F6F6FA; /* table head, card footers, expanded step body, secondary hover */
  --wb-surf3:        #ECECF2; /* disabled input bg, OFF chip, skeleton base, rail todo segments */
  --wb-line:         #E3E3EC; /* card borders, row dividers */
  --wb-line-strong:  #C6C6D4; /* input borders, secondary button borders, range track */

  /* ─── Buttons / feedback ────────────────────────────────────────── */
  --wb-btn-primary-bg:    #1D1C2B;
  --wb-btn-primary-fg:    #FFFFFF;
  --wb-btn-primary-hover: #33324A;
  --wb-toast-bg:          #1D1C2B;
  --wb-toast-fg:          #FFFFFF;
  --wb-focus:             #5B44E4; /* :focus-visible ring (2px gap + 2px ring) */

  /* ─── Elevation ─────────────────────────────────────────────────── */
  --wb-shadow-1: 0 1px 0 rgba(29,28,43,.04), 0 1px 2px rgba(29,28,43,.06); /* cards */
  --wb-shadow-2: 0 4px 12px rgba(29,28,43,.10);                            /* popover, reveal card */
  --wb-shadow-3: 0 12px 32px rgba(29,28,43,.18);                           /* toast, modal */

  /* ─── Shape ─────────────────────────────────────────────────────── */
  --wb-r-card: 12px; /* cards, tables, row-cards, hero */
  --wb-r-ctl:  8px;  /* buttons, inputs, banners, selects */
  --wb-r-sm:   6px;  /* pagination buttons, jump-nav items, small chips */
  --wb-r-pill: 999px;/* chips, filter segments */

  /* ─── Space (4px base) ──────────────────────────────────────────── */
  --wb-s1: 4px;  /* label→input, chip gap */
  --wb-s2: 8px;  /* button gap, inline gaps */
  --wb-s3: 12px; /* field→field, card padding mobile, row padding */
  --wb-s4: 16px; /* card padding desktop, gap between cards */
  --wb-s5: 20px; /* hero padding */
  --wb-s6: 24px; /* page gutter desktop */
  --wb-s8: 32px; /* page bottom padding */

  /* ─── Size ──────────────────────────────────────────────────────── */
  --wb-ctl-h:      32px; /* control height desktop; 44px under --wb-bp-mobile (see media block) */
  --wb-row-h:      44px; /* table row min height */
  --wb-input-tiny: 56px; /* L/H/D cells */
  --wb-input-small:96px; /* weight, hours, $ */
  --wb-range-thumb:20px; /* 28px on mobile */
  --wb-logo-h:     40px; /* brand row logo, 32px on mobile */
  --wb-mascot:     40px; /* wizard header mascot; 56 in reveal */

  /* ─── Breakpoints (documentation only — media queries can't read vars;
         components.css hard-codes 720px / 1040px to match) ────────── */
  --wb-bp-mobile:  720px;  /* tables → row-cards, controls → 44px, single column */
  --wb-bp-narrow:  1040px; /* two-column card grids → one column */

  /* ─── Type ──────────────────────────────────────────────────────── */
  --wb-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; /* self-hosted above; falls back to system fonts if the woff2 fails to load */
  --wb-mono: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* SKUs, IDs, tokens */
  --wb-fs-title: 20px; --wb-lh-title: 1.2;  --wb-fw-title: 600; /* page title */
  --wb-fs-card:  15px; --wb-lh-card:  1.3;  --wb-fw-card:  600; /* card title */
  --wb-fs-body:  13px; --wb-lh-body:  1.5;  --wb-fw-body:  400; /* body, table cells, inputs */
  --wb-fs-help:  12px; --wb-lh-help:  1.5;                      /* helper, status, labels (labels 500) */
  --wb-fs-table: 13px; --wb-lh-table: 1.4;                      /* tabular numerals on */
  --wb-fs-stat:  28px; --wb-lh-stat:  1.1;  --wb-fw-stat:  600; /* hero numbers, letter-spacing -.01em */
  --wb-fs-chip:  11px; --wb-fw-chip:  600;                      /* chips, table head (uppercase, .02em) */
  --wb-fs-mobile-btn: 14px;                                     /* full-width buttons at 44px */

  /* ─── Motion ────────────────────────────────────────────────────── */
  --wb-dur-fast:   120ms; /* hover, focus ring */
  --wb-dur-base:   200ms; /* expand/collapse, chip swaps */
  --wb-dur-saved:  1600ms;/* "✓ Saved" label + row rail hold time */
  --wb-dur-toast:  4000ms;/* toast auto-dismiss */
  --wb-ease:       cubic-bezier(.2,.7,.2,1);
}

@media (max-width: 720px) {
  :root {
    --wb-ctl-h: 44px;
    --wb-range-thumb: 28px;
    --wb-logo-h: 32px;
    --wb-s6: 12px; /* page gutter */
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --wb-brand:        #9B8CF5;
    --wb-brand-hover:  #B3A7F8;
    --wb-brand-soft:   #2A2650;
    --wb-brand-ink:    #C4BAFA;
    --wb-gold:         #E9C25A;
    --wb-gold-soft:    #332B12;
    --wb-good:         #6FD39A; --wb-good-bg: #14301F; --wb-good-line: #245A3A;
    --wb-inh:          #B4BFD6; --wb-inh-bg:  #23293A; --wb-inh-line:  #3B4358;
    --wb-warn:         #F0B35E; --wb-warn-bg: #3A2A10; --wb-warn-line: #5E441C;
    --wb-crit:         #F28B7F; --wb-crit-bg: #3D1D19; --wb-crit-line: #66302A;
    --wb-ink:          #ECECF4;
    --wb-ink2:         #B3B4C8;
    --wb-ink3:         #8E90A6;
    --wb-ink-inv:      #1D1C2B;
    --wb-page:         #111117;
    --wb-surf:         #1B1B24;
    --wb-surf2:        #222230;
    --wb-surf3:        #2B2B3B;
    --wb-line:         #33334A;
    --wb-line-strong:  #4A4A66;
    --wb-btn-primary-bg:    #ECECF4;
    --wb-btn-primary-fg:    #1D1C2B;
    --wb-btn-primary-hover: #FFFFFF;
    --wb-toast-bg:          #ECECF4;
    --wb-toast-fg:          #1D1C2B;
    --wb-focus:             #9B8CF5;
    --wb-shadow-1: 0 1px 0 rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.4);
    --wb-shadow-2: 0 4px 12px rgba(0,0,0,.45);
    --wb-shadow-3: 0 12px 32px rgba(0,0,0,.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --wb-dur-fast: 0ms; --wb-dur-base: 0ms; }
}