/* ============================================================
   DESIGN TOKENS · the one place colors, type, space, radius and shadows are defined
   ============================================================
   Loaded FIRST by every page (the counter POS and the station, driver, work, manager, platform and
   register apps). Everything else uses var(--…). A raw color anywhere else is refused by
   tests/tokens.test.js (it may only shrink: tests/tokens-baseline.json).

   Two layers:
   1. The new look (HANDOFF-sandbox Part 4, 2026-10-07): white and black, color only for status,
      Geist, one optional store accent.
   2. Today's names (--navy, --gold, --bg, …), still used by most screens. They are rolled over
      to layer 1 screen by screen; a store's brand colors (js/core/theme.js) still set them. */

:root {
  /* ── 1. New look ── */
  /* surfaces and lines */
  --surface:      #FFFFFF;   /* page and cards */
  --surface-2:    #FAFAFA;   /* panels, rail, table heads */
  --surface-3:    #F0F0F0;   /* hover on surface-2 */
  --line:         #E5E5E5;   /* 1px borders */
  --line-strong:  #D4D4D4;   /* inputs, secondary buttons */
  /* text */
  --ink:          #0A0A0A;   /* text, primary button */
  --ink-hover:    #262626;   /* primary button hover */
  --ink-2:        #525252;   /* secondary text */
  --ink-3:        #A3A3A3;   /* muted text, placeholders, disabled */
  --on-ink:       #FFFFFF;   /* text on the black button */
  /* status: soft tint + readable ink (each pair is 4.5:1 or better) */
  --ok-bg:   #F0FDF4;  --ok-fg:   #166534;  --ok-line:   #BBF7D0;   /* paid, ready */
  --warn-bg: #FFFBEB;  --warn-fg: #92400E;  --warn-line: #FDE68A;   /* due, warning */
  --bad-bg:  #FEF2F2;  --bad-fg:  #991B1B;  --bad-line:  #FECACA;   /* overdue, error */
  --info-bg: #EFF6FF;  --info-fg: #1E40AF;  --info-line: #BFDBFE;   /* info, in progress */
  /* driver lanes (Route board, manager map): one color per driver, never a status color (no red / green / amber) */
  --lane-1: #1D4ED8;  --lane-2: #7C3AED;  --lane-3: #0E7490;  --lane-4: #BE185D;  --lane-5: #525252;  --lane-6: #4338CA;
  /* a store's one brand accent (logo + active indicator only); the default has none, so it is ink */
  --accent:       #0A0A0A;
  /* type */
  --font:         'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, Consolas, monospace;
  --t-12: 12px; --t-14: 14px; --t-16: 16px; --t-20: 20px; --t-28: 28px; --t-36: 36px;
  --w-regular: 400; --w-medium: 500; --w-semibold: 600;
  /* space: 4px steps */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;
  /* shape */
  --r-control: 8px; --r-card: 12px; --r-pill: 999px;
  --touch: 44px;             /* smallest touch target at the counter */
  /* shadow: popovers and menus only */
  --shadow-pop: 0 8px 24px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --overlay:    rgba(10,10,10,0.40);   /* behind modals */
  /* motion */
  --ease: cubic-bezier(0.2, 0, 0, 1); --fast: 150ms; --base: 200ms;

  /* ── 2. Today's names, rolled over to the new look (D4, 2026-10-07). A store's own colors (js/core/theme.js)
        still override --navy* / --gold* at run time. --navy = ink; --gold = the one filled/selected color
        (ink, white text on it); --gold-pale / --gold-light = quiet grey fills for hover and selected rows. ── */
  --navy:       #0A0A0A;
  --navy-dark:  #0A0A0A;
  --navy-light: #262626;
  --gold:       #0A0A0A;
  --gold-light: #E5E5E5;
  --gold-pale:  #F5F5F5;
  --gold-ink:   #525252;
  --bg:         #FAFAFA;
  --white:      #FFFFFF;
  --text:       #0A0A0A;
  --text-muted: #525252;
  --border:     #E5E5E5;
  --danger:     #B91C1C;
  --ok:         #16A34A;
  --warn:       #B45309;
  --radius:     12px;
  --radius-sm:  8px;
  --shadow:     0 1px 2px rgba(0,0,0,0.06);
}

/* ── Garment icons (js/core/i18n.js GARMENT_ART / GARMENT_TONE) ──
   Each icon shape names a shade slot (f1…f7 fill, s1…s7 stroke: darkest → white). A garment's
   color family (.gc-*) fills the slots with its usual color, so jeans read blue and a suit navy
   at a glance; outlines stay ink. Without a family an icon is neutral grey. */
.gico {
  --gc-1: #0A0A0A; --gc-2: #404040; --gc-3: #737373; --gc-4: #A3A3A3; --gc-5: #D4D4D4; --gc-6: #EDEDED; --gc-7: #FFFFFF;
}
.gico.gc-sky    { --gc-1: #0C4A6E; --gc-2: #075985; --gc-3: #0284C7; --gc-4: #7DD3FC; --gc-5: #BAE6FD; --gc-6: #E0F2FE; }
.gico.gc-denim  { --gc-1: #0F1E3D; --gc-2: #1E3A6E; --gc-3: #3B5F9E; --gc-4: #7C9CCB; --gc-5: #B9CCE6; --gc-6: #DCE6F4; }
.gico.gc-navy   { --gc-1: #0B1220; --gc-2: #1E293B; --gc-3: #334155; --gc-4: #64748B; --gc-5: #CBD5E1; --gc-6: #E2E8F0; }
.gico.gc-red    { --gc-1: #450A0A; --gc-2: #7F1D1D; --gc-3: #B91C1C; --gc-4: #E5484D; --gc-5: #FCA5A5; --gc-6: #FEE2E2; }
.gico.gc-pink   { --gc-1: #500724; --gc-2: #9D174D; --gc-3: #DB2777; --gc-4: #F472B6; --gc-5: #FBCFE8; --gc-6: #FCE7F3; }
.gico.gc-purple { --gc-1: #2E1065; --gc-2: #4C1D95; --gc-3: #7C3AED; --gc-4: #A78BFA; --gc-5: #DDD6FE; --gc-6: #EDE9FE; }
.gico.gc-teal   { --gc-1: #042F2E; --gc-2: #134E4A; --gc-3: #0F766E; --gc-4: #4FB3A9; --gc-5: #99F6E4; --gc-6: #CCFBF1; }
.gico.gc-green  { --gc-1: #052E16; --gc-2: #14532D; --gc-3: #2F7D4A; --gc-4: #6BBF8A; --gc-5: #BBF7D0; --gc-6: #DCFCE7; }
.gico.gc-yellow { --gc-1: #422006; --gc-2: #854D0E; --gc-3: #CA8A04; --gc-4: #EAB308; --gc-5: #FDE047; --gc-6: #FEF9C3; }
.gico.gc-camel  { --gc-1: #422006; --gc-2: #78350F; --gc-3: #A16207; --gc-4: #D4A15A; --gc-5: #E9CFA0; --gc-6: #F6EBD6; }
.gico.gc-brown  { --gc-1: #1C0F08; --gc-2: #3F2A1D; --gc-3: #6B4A34; --gc-4: #A47E5F; --gc-5: #D6BFA8; --gc-6: #EFE4D8; }
.gico.gc-cream  { --gc-1: #3D3324; --gc-2: #6B5B40; --gc-3: #9C8862; --gc-4: #C8B68E; --gc-5: #E8DCC0; --gc-6: #F7F1E3; }
.gico .f1 { fill: var(--gc-1); } .gico .f2 { fill: var(--gc-2); } .gico .f3 { fill: var(--gc-3); } .gico .f4 { fill: var(--gc-4); }
.gico .f5 { fill: var(--gc-5); } .gico .f6 { fill: var(--gc-6); } .gico .f7 { fill: var(--gc-7); }
.gico .s1 { stroke: var(--gc-1); } .gico .s2 { stroke: var(--gc-2); } .gico .s3 { stroke: var(--gc-3); } .gico .s4 { stroke: var(--gc-4); }
.gico .s5 { stroke: var(--gc-5); } .gico .s6 { stroke: var(--gc-6); } .gico .s7 { stroke: var(--gc-7); }