/* ============================================================
   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;

  /* 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;

  /* 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);

  /* 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;
}