/* ============================================================
   Gusto WMS — Design System v1 Tokens
   ------------------------------------------------------------
   2-layer architecture:
   - Layer 1: --col-*, --space-*, --radius-*, --fs-* (primitives)
   - Layer 2: --c-* (semantic — purpose-driven)

   Wrapped in :where() for low specificity (0,0,0) so:
   - Bootstrap defaults still win on conflicts
   - app.css :root {} (specificity 0,1,0) wins for existing tokens
   - Custom CSS in components/* can override naturally

   Browser support: Chrome 100+ / Edge 100+ (CSS variables + :where)
   ============================================================ */

:where(:root) {
  /* ─────────────────────────────────────────────────────────
     LAYER 1 — PRIMITIVE PALETTE
     Abstract values, no semantic meaning.
     ───────────────────────────────────────────────────────── */

  /* Neutrals */
  --col-neutral-0:    #ffffff;
  --col-neutral-50:   #f8fafc;
  --col-neutral-100:  #f1f5f9;
  --col-neutral-200:  #e2e8f0;
  --col-neutral-300:  #cbd5e1;
  --col-neutral-400:  #94a3b8;
  --col-neutral-500:  #64748b;
  --col-neutral-600:  #475569;
  --col-neutral-700:  #334155;
  --col-neutral-800:  #1e293b;
  --col-neutral-900:  #0f172a;

  /* Success (green) */
  --col-success-50:   #d1fae5;
  --col-success-100:  #dcfce7;
  --col-success-500:  #10b981;
  --col-success-600:  #16a34a;
  --col-success-700:  #15803d;
  --col-success-800:  #166534;
  --col-success-900:  #065f46;

  /* Teal — the customer-return work type (Rule 34).
     A categorical hue, not a semantic one: it means "this card is an RMA
     receipt", the same way accent-600 means RTV and warn means put-back. Kept
     here rather than inline in my-tasks.html so the floor's five accents are all
     named in one place — a sixth work type should land next to these. */
  --col-teal-600:     #0d9488;
  --col-teal-300:     #5eead4;

  /* Danger (red) */
  --col-danger-50:    #fee2e2;
  --col-danger-500:   #ef4444;
  --col-danger-600:   #dc2626;
  --col-danger-700:   #b91c1c;
  --col-danger-800:   #991b1b;

  /* Warning (amber) */
  --col-warn-50:      #fef3c7;
  --col-warn-100:     #fef9c3;
  --col-warn-500:     #f59e0b;
  --col-warn-600:     #d97706;
  --col-warn-700:     #b45309;
  --col-warn-800:     #92400e;
  --col-warn-900:     #a16207;

  /* Info (blue) */
  --col-info-50:      #dbeafe;
  --col-info-100:     #bfdbfe;
  --col-info-500:     #3b82f6;
  --col-info-600:     #2563eb;
  --col-info-700:     #1d4ed8;
  --col-info-800:     #1e40af;

  /* Accent (indigo) — de-facto accent hue (dashboards, catalog, reports) */
  --col-accent-50:    #eef2ff;
  --col-accent-100:   #e0e7ff;
  --col-accent-500:   #6366f1;
  --col-accent-600:   #4f46e5;
  --col-accent-700:   #4338ca;

  /* Brand (Lightning blue) — CHROME ONLY, never a status (2026-08-21).
     Introduced for the Sales Desk restyle: the page dropped its six indigo
     gradient section bands for white widget heads on a blue brand band, the
     way a Lightning dashboard reads. It is deliberately NOT --col-info-*:
     info is a SEVERITY (a blue chip means "notice this"), and spending a
     severity hue on page chrome is how a page ends up unable to say
     "notice this" any more. Brand means "this is interactive / this is the
     product", nothing else.
     600 is the interactive blue (links, brand button, the pipeline bubbles a
     rep owns); 700→800 is the band ramp; 50/200 the tint + hairline. */
  --col-brand-50:     #eef4ff;
  --col-brand-100:    #d8e6fe;
  --col-brand-200:    #b6d4f5;
  --col-brand-500:    #1b96ff;
  --col-brand-600:    #0176d3;
  --col-brand-700:    #0b5cab;
  --col-brand-800:    #014486;
  --col-brand-900:    #032d60;

  /* Spacing scale */
  --space-0:    0;
  --space-xxs:  0.125rem;   /* 2px */
  --space-xs:   0.25rem;    /* 4px */
  --space-sm:   0.5rem;     /* 8px */
  --space-md:   1rem;       /* 16px */
  --space-lg:   1.5rem;     /* 24px */
  --space-xl:   2rem;       /* 32px */
  --space-xxl:  3rem;       /* 48px */

  /* Radius */
  --radius-xs:   0.25rem;
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   1rem;
  --radius-pill: 9999px;

  /* Typography (font-size — font-family inherits from Bootstrap) */
  --fs-xs:  0.7rem;    /* 11px — footnote, dense KPI sub */
  --fs-sm:  0.82rem;   /* 13px — small text, table cells */
  --fs-md:  1rem;      /* 16px — body */
  --fs-lg:  1.25rem;   /* 20px — h4 */
  --fs-xl:  1.75rem;   /* 28px — h2, KPI value */
  --fs-xxl: 2.25rem;   /* 36px — page hero */

  /* Shadow */
  --shadow-sm:   0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-md:   0 4px 6px -1px rgba(0,0,0,0.1);
  --shadow-lg:   0 10px 15px -3px rgba(0,0,0,0.1);

  /* Z-index (Bootstrap defaults: modal-backdrop=1040, modal=1050, popover=1070, tooltip=1080) */
  --z-sticky:        5;
  --z-dropdown:    100;
  --z-tomselect:  1060;   /* above Bootstrap modal to fix dropdown-in-modal */
  --z-modal-backdrop: 1040;
  --z-modal:       1050;
  --z-popover:     1070;
  --z-tooltip:     1080;

  /* Motion / transitions */
  --motion-fast:  100ms ease-in-out;
  --motion-norm:  200ms ease-in-out;
  --motion-slow:  300ms ease-out;

  /* Border width */
  --border-default: 1px;
  --border-focus:   2px;
  --border-thick:   3px;

  /* Opacity scale */
  --opacity-disabled: 0.5;
  --opacity-hover:    0.08;
  --opacity-overlay:  0.16;


  /* ─────────────────────────────────────────────────────────
     LAYER 2 — SEMANTIC TOKENS
     Purpose-driven aliases. Use these in fragments + new CSS.
     ───────────────────────────────────────────────────────── */

  /* Status / Severity — for badges, alerts, KPI tone */
  --c-success:       var(--col-success-600);
  --c-success-bg:    var(--col-success-50);
  --c-success-text:  var(--col-success-900);

  --c-danger:        var(--col-danger-600);
  --c-danger-bg:     var(--col-danger-50);
  --c-danger-text:   var(--col-danger-800);

  --c-warn:          var(--col-warn-600);
  --c-warn-bg:       var(--col-warn-50);
  --c-warn-text:     var(--col-warn-800);

  --c-info:          var(--col-info-600);
  --c-info-bg:       var(--col-info-50);
  --c-info-text:     var(--col-info-800);

  --c-neutral:       var(--col-neutral-500);
  --c-neutral-bg:    var(--col-neutral-100);
  --c-neutral-text:  var(--col-neutral-700);

  --c-accent:        var(--col-accent-600);
  --c-accent-bg:     var(--col-accent-50);
  --c-accent-text:   var(--col-accent-700);

  /* Brand — chrome, not severity. No Bootstrap bridge on purpose: this hue is
     not a button or alert VARIANT, so nothing in the three-layer bridge maps to
     it and --bs-primary is left alone (changing it would restyle the whole app
     off the back of one page).
     Do NOT write the variant names here as class globs: a slash after the star
     closes this comment mid-sentence, and the broken declaration that follows
     eats --c-brand itself. That is exactly how this token shipped undefined the
     first time — the New Sales Request button rendered white on white. */
  --c-brand:         var(--col-brand-600);
  --c-brand-strong:  var(--col-brand-800);
  --c-brand-bg:      var(--col-brand-50);
  --c-brand-border:  var(--col-brand-200);

  /* Delta — direction-based (cost-up=bad, cost-down=good) */
  --c-delta-up:      var(--c-danger);
  --c-delta-down:    var(--c-success);
  --c-delta-flat:    var(--c-neutral);

  /* Margin — sign-based (negative=bad, ≥0=good), NO warn band */
  --c-margin-bad:    var(--c-danger);
  --c-margin-good:   var(--c-success);

  /* Surface / background layers */
  --c-bg-card:       var(--col-neutral-0);
  --c-bg-surface:    var(--col-neutral-50);
  --c-bg-soft:       var(--col-neutral-100);

  /* Border */
  --c-border:        var(--col-neutral-200);
  --c-border-soft:   var(--col-neutral-100);
  --c-border-strong: var(--col-neutral-300);

  /* Text hierarchy */
  --c-text:          var(--col-neutral-800);
  --c-text-light:    var(--col-neutral-600);
  --c-text-lighter:  var(--col-neutral-500);
  --c-text-inverse:  var(--col-neutral-0);

  /* Focus ring (WCAG AA — 3px solid, 3:1 contrast) */
  --focus-ring:      var(--border-thick) solid var(--c-info);
  --focus-offset:    var(--space-xxs);
}

/* ============================================================
   Fix: Tom Select dropdown z-index in modal (Gotcha)
   ============================================================ */
.ts-dropdown {
  z-index: var(--z-tomselect) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Bootstrap bridge — one palette, not two (2026-07-21)

   Until now the app ran two colour systems side by side. Bootstrap shipped at
   stock (--bs-success #198754, --bs-danger #dc3545) while the design system
   used its own (--c-success #16a34a, --c-danger #dc2626), and nothing mapped
   between them. That is not a theoretical mismatch: measured on the running
   app, BOTH greens and BOTH reds render on the SAME page — /purchase/orders,
   /inventory/stock and /warehouse/work-queue alike — so a user sees two
   different "success" greens side by side on one screen.

   The tokens win, because they are the documented standard (Design System v1)
   and the fragments already follow them. Bootstrap is what bends.

   This file loads AFTER bootstrap.min.css in fragments/layout.html, which is
   what lets a plain :root block override it — no !important needed.

   THREE layers, and all three are required. Bootstrap 5.3 does not resolve
   everything through the theme variable: utilities read --bs-*-rgb, but
   buttons and alerts carry their own component-level literals. Overriding only
   the first layer would leave a token-green .text-success label next to a
   Bootstrap-green .btn-success button — a NEW inconsistency, worse than the one
   being fixed. Usage is real on every layer: ~656 utility, ~190 button, ~175
   alert occurrences across the templates.

   Adding a semantic colour? Update all three blocks, or the new one will be
   consistent in labels and wrong in buttons.
   ══════════════════════════════════════════════════════════════════════════ */

/* Layer 1 — theme variables. Drives .text-*, .bg-*, .border-*, .link-*.
   The -rgb triplets must be kept in step with the hex above them: the
   utilities compose them through rgba() for opacity support, so a stale
   triplet shows up as the OLD colour on exactly those classes. */
:root {
  --bs-success:      #16a34a;   /* --col-success-600 */
  --bs-success-rgb:  22, 163, 74;
  --bs-danger:       #dc2626;   /* --col-danger-600 */
  --bs-danger-rgb:   220, 38, 38;
  --bs-warning:      #d97706;   /* --col-warn-600 */
  --bs-warning-rgb:  217, 119, 6;
  --bs-info:         #2563eb;   /* --col-info-600 */
  --bs-info-rgb:     37, 99, 235;
}

/* Layer 2 — buttons. Bootstrap 5.3 gives each variant its own --bs-btn-*
   set with literal values, so the theme variable above never reaches them. */
.btn-success {
  --bs-btn-bg: var(--col-success-600);
  --bs-btn-border-color: var(--col-success-600);
  --bs-btn-hover-bg: var(--col-success-700);
  --bs-btn-hover-border-color: var(--col-success-700);
  --bs-btn-active-bg: var(--col-success-800);
  --bs-btn-active-border-color: var(--col-success-800);
  --bs-btn-disabled-bg: var(--col-success-600);
  --bs-btn-disabled-border-color: var(--col-success-600);
}
.btn-outline-success {
  --bs-btn-color: var(--col-success-600);
  --bs-btn-border-color: var(--col-success-600);
  --bs-btn-hover-bg: var(--col-success-600);
  --bs-btn-hover-border-color: var(--col-success-600);
  --bs-btn-active-bg: var(--col-success-700);
  --bs-btn-active-border-color: var(--col-success-700);
  --bs-btn-disabled-color: var(--col-success-600);
  --bs-btn-disabled-border-color: var(--col-success-600);
}
.btn-danger {
  --bs-btn-bg: var(--col-danger-600);
  --bs-btn-border-color: var(--col-danger-600);
  --bs-btn-hover-bg: var(--col-danger-700);
  --bs-btn-hover-border-color: var(--col-danger-700);
  --bs-btn-active-bg: var(--col-danger-800);
  --bs-btn-active-border-color: var(--col-danger-800);
  --bs-btn-disabled-bg: var(--col-danger-600);
  --bs-btn-disabled-border-color: var(--col-danger-600);
}
.btn-outline-danger {
  --bs-btn-color: var(--col-danger-600);
  --bs-btn-border-color: var(--col-danger-600);
  --bs-btn-hover-bg: var(--col-danger-600);
  --bs-btn-hover-border-color: var(--col-danger-600);
  --bs-btn-active-bg: var(--col-danger-700);
  --bs-btn-active-border-color: var(--col-danger-700);
  --bs-btn-disabled-color: var(--col-danger-600);
  --bs-btn-disabled-border-color: var(--col-danger-600);
}

/* Layer 3 — alerts. Same story: --bs-alert-* literals per variant.
   Mapped onto the -bg / -text token pairs the house alert fragment uses, so a
   Bootstrap alert and a fragment alert finally read as the same component.
   NOTE: .alert-danger's CLASS NAME is load-bearing for Selenium
   (getFlashError, Rule 49) — this changes its colour, never its selector. */
.alert-success {
  --bs-alert-color: var(--c-success-text);
  --bs-alert-bg: var(--c-success-bg);
  --bs-alert-border-color: var(--col-success-100);
}
.alert-danger {
  --bs-alert-color: var(--c-danger-text);
  --bs-alert-bg: var(--c-danger-bg);
  --bs-alert-border-color: var(--col-danger-50);
}
.alert-warning {
  --bs-alert-color: var(--c-warn-text);
  --bs-alert-bg: var(--c-warn-bg);
  --bs-alert-border-color: var(--col-warn-100);
}
.alert-info {
  --bs-alert-color: var(--c-info-text);
  --bs-alert-bg: var(--c-info-bg);
  --bs-alert-border-color: var(--col-info-100);
}