/* ============================================================================
   ByteCraft POS — /static/core/tokens.css
   Design tokens (SPEC.md §1). Consumed verbatim by BOTH surfaces.
   Load order: /static/brand/colors.css FIRST, then this file, then
   /static/core/ui.css.
   Breakpoints (media queries only — custom props can't drive them):
     sm 600px · md 768px · lg 1024px · xl 1280px
   ============================================================================ */

@font-face {
  font-family: "Inter";
  src: url("/static/core/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Brand (aliases of /static/brand/colors.css — keep that file loaded) */
  --navy:   #00224a;   /* structural: sidebar, primary buttons, chart primary */
  --gold:   #f1b527;   /* the three gold jobs ONLY (see spec intro) */
  --purple: #8651a1;   /* reserved: avatar/fallback tints only */
  --green:  #31bb95;   /* cash tender fill */
  --red:    #e21e26;   /* danger button fill only (white text = 4.7:1 AA) */

  /* ---- Navy ramp */
  --navy-700: #0d3565; /* hover on navy fills */
  --navy-600: #1b4a85; /* links on white (7.9:1), secondary chart fills */
  --navy-100: #dbe4f0; /* selected-row tint */
  --navy-50:  #eef3f9; /* hover tint on white, secondary-button tint */

  /* ---- Gold ramp */
  --gold-600: #d99f12; /* pressed gold (Charge active) */
  --gold-50:  #fef8e9; /* cart-line flash wash */

  /* ---- Neutrals (cool, navy-cast) */
  --ink:    #0e1b2c;   /* primary text & KPI numerals (15.9:1) */
  --ink-2:  #3c4b5e;   /* secondary text (8.6:1) */
  --ink-3:  #5d6b7e;   /* muted text, axis labels (5.4:1 — AA) */
  --ink-4:  #8593a5;   /* placeholders/disabled ONLY (3.1:1 — never body text) */
  --line:   #e3e8ef;   /* hairline card/table borders */
  --line-2: #cfd7e1;   /* input borders, emphasized rules */
  --bg:        #f7f8fb;
  --surface:   #ffffff;
  --surface-2: #f2f5f9; /* table heads, wells, segmented track */
  --photo-well:#f3f5f8; /* product-photo background (matches asset bg) */

  /* ---- Semantic */
  --pos: #0e7a55;  --pos-bg: #e7f6ef;  --pos-line: #bfe7d4;  /* 5.4:1 */
  --neg: #b3151a;  --neg-bg: #fdecec;  --neg-line: #f5c6c7;  /* 7.1:1 */
  --warn:#8a6100;  --warn-bg:#fdf3d8;  --warn-line:#f1dca4;  /* 5.6:1 */
  --info:#1565c0;  --info-bg:#e8f1fb;
  --ring:#1565c0;  /* focus ring on light surfaces */

  /* ---- Tender / chart palette (always distinguishable, never re-mapped) */
  --t-cash:      #31bb95;  --t-cash-text:     #0e7a55;
  --t-innbucks:  #00224a;  --t-innbucks-text: #00224a;
  --t-ecocash:   #1565c0;  --t-ecocash-text:  #0f4f99;
  --chart-grid:  #eef1f6;
  --chart-area-from: rgba(0,34,74,.14);
  --chart-area-to:   rgba(0,34,74,0);

  /* ---- Type scale (rem; root 16px) */
  --font-ui: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-2xs: 0.6875rem;  /* 11 — axis labels, tile captions   lh 1.3 */
  --fs-xs:  0.75rem;    /* 12 — table heads, pills, captions lh 1.35 */
  --fs-sm:  0.8125rem;  /* 13 — table body, secondary        lh 1.45 */
  --fs-base:0.875rem;   /* 14 — UI default, buttons, nav     lh 1.45 */
  --fs-md:  1rem;       /* 16 — till inputs (no iOS zoom)    lh 1.45 */
  --fs-lg:  1.125rem;   /* 18 — section titles               lh 1.3  */
  --fs-xl:  1.375rem;   /* 22 — page titles                  lh 1.25 */
  --fs-2xl: 1.75rem;    /* 28 — KPI numerals                 lh 1.15 */
  --fs-3xl: 2.25rem;    /* 36 — till total, hero KPI         lh 1.1  */
  --fs-4xl: 3rem;       /* 48 — charge amount, change due    lh 1.05 */
  /* Weights: 400 body · 500 labels/nav · 600 emphasis/buttons · 700 numerals.
     KPI numerals: letter-spacing -0.01em. Table heads: +0.06em UPPERCASE.
     ALL money/qty figures: font-variant-numeric: tabular-nums. */

  /* ---- Spacing (4px scale) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  /* ---- Radii */
  --r-sm: 6px;   /* chips, thumbs, pills' inner elements */
  --r-md: 10px;  /* buttons, inputs, tiles */
  --r-lg: 14px;  /* cards, dialogs, sheets, Charge */
  --r-full: 999px;

  /* ---- Shadows (hairline-first: every card pairs border + shadow-1) */
  --shadow-1: 0 1px 2px rgba(14,27,44,.05);
  --shadow-2: 0 4px 16px rgba(14,27,44,.07);          /* popovers, cart bar */
  --shadow-3: 0 16px 48px rgba(0,34,74,.18);          /* dialogs, sheets */
  --shadow-gold: 0 2px 6px rgba(241,181,39,.35);      /* Charge button ONLY */

  /* ---- Z-layers */
  --z-sticky: 20;  /* sticky scan bar, table headers */
  --z-nav:    30;  /* bottom nav, sidebar */
  --z-cartbar:35;
  --z-sheet:  40;  /* cart sheet, payment sheet */
  --z-dialog: 50;  /* native <dialog> uses top layer anyway */
  --z-toast:  60;

  /* ---- Motion */
  --dur-1: 120ms; --dur-2: 160ms; --dur-3: 200ms; --dur-4: 320ms;
  --ease-out:    cubic-bezier(.2,.7,.3,1);
  --ease-spring: cubic-bezier(.2,.8,.3,1.15);  /* paid-check only */
}

/* ---- Base resets ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* The hidden attribute must always win, even over display rules on the same
   element (e.g. .login{display:flex} after sign-in). */
[hidden] { display: none !important; }

body { font-family: var(--font-ui); font-size: var(--fs-base);
  color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent; }
.tnum, .num { font-variant-numeric: tabular-nums; }

/* ---- Focus — one rule everywhere; gold on navy surfaces (blue ring fails 3:1 there) */
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.is-navy :focus-visible { outline-color: var(--gold); } /* sidebar, navy headers, cart bar */

/* ---- Reduced motion — global kill switch ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ---- Screen-reader-only utility (chart data tables, labels) ------------ */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  border: 0; }

/* ---- Icon sizing (§1) ---------------------------------------------------
   window.ICONS SVGs carry class="icon" + fill="currentColor" and NO
   width/height attrs — size them via these wrapper classes:
   <span class="ic-20" aria-hidden="true"></span>; el.innerHTML = ICONS.key.
   .ic-16 inline with text · .ic-20 buttons/nav · .ic-24 bottom nav ·
   .ic-32/.ic-48 state screens · .ic-12/.ic-14 micro (tile low-stock,
   list-row low-stock sub, KPI delta). */
svg.icon { width: 1em; height: 1em; display: inline-block;
  vertical-align: -0.125em; fill: currentColor; }
.ic-12, .ic-14, .ic-16, .ic-20, .ic-24, .ic-32, .ic-48 {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; }
.ic-12, .ic-14, .ic-16 { vertical-align: -2px; }
.ic-12 { width: 12px; height: 12px; }
.ic-14 { width: 14px; height: 14px; }
.ic-16 { width: 16px; height: 16px; }
.ic-20 { width: 20px; height: 20px; }
.ic-24 { width: 24px; height: 24px; }
.ic-32 { width: 32px; height: 32px; }
.ic-48 { width: 48px; height: 48px; }
.ic-12 svg.icon, .ic-14 svg.icon, .ic-16 svg.icon, .ic-20 svg.icon,
.ic-24 svg.icon, .ic-32 svg.icon, .ic-48 svg.icon {
  width: 100%; height: 100%; display: block; vertical-align: baseline; }