/* ============================================================
   WOHub Design Tokens — Re-imagined migration foundation
   Ported verbatim from prototype WOHub.html (:root + light override).
   Default is dark (Vercel pure-black palette); light theme via
   html[data-theme="light"]. Set via theme bootstrap in base.html.
   ============================================================ */
:root {
  /* Dark theme — Vercel pure-black palette */
  --bg:       #000000;
  --bg-1:     #0a0a0a;
  --bg-2:     #111111;
  --bg-3:     #161616;
  --bg-4:     #1c1c1c;
  --border:   #1f1f1f;
  --border-2: #2a2a2a;
  --border-3: #383838;
  --text:     #ededed;
  --text-2:   #a1a1a1;
  --text-3:   #6b6b6b;
  --text-4:   #444444;
  --accent:   #fafafa;
  --blue:     #3b82f6;
  --blue-2:   #60a5fa;
  --blue-bg:  rgba(59,130,246,0.12);
  --green:    #22c55e;
  --green-bg: rgba(34,197,94,0.12);
  --amber:    #f59e0b;
  --amber-bg: rgba(245,158,11,0.12);
  --red:      #ef4444;
  --red-bg:   rgba(239,68,68,0.12);
  --orange:   #f97316;
  --orange-bg:rgba(249,115,22,0.12);
  --purple:   #a855f7;
  --purple-bg:rgba(168,85,247,0.12);
  --pink:     #ec4899;

  /* Dept colors */
  --dept-fab:        #3b82f6;
  --dept-paint:      #a855f7;
  --dept-electrical: #f59e0b;
  --dept-install:    #22c55e;
  --dept-qc:         #ec4899;
  --dept-router:     #06b6d4;
  --dept-flatbed:    #f97316;

  --shadow: 0 1px 0 rgba(255,255,255,0.03), 0 0 0 1px rgba(255,255,255,0.02);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);

  /* Modal/drawer backdrop scrim. Heavier in dark mode where the underlying
     surface is near-black; the lighter light-theme value is below. */
  --scrim: rgba(0,0,0,0.65);

  /* Semantic foreground for text rendered on saturated coloured backgrounds
     (blue/red/green/orange buttons, avatar circles, badges). Stays white in
     both themes — the same way Tailwind's `text-white` is theme-independent. */
  --text-inverted: #fff;

  /* Lighter colored text — used on coloured *-bg surfaces in dark mode where
     the base --green/--amber/--orange/--red read too saturated. Light override
     darkens them for AA contrast on white. */
  --green-text:  #4ade80;
  --amber-text:  #fbbf24;
  --orange-text: #fb923c;
  --red-text:    #fca5a5;
  --blue-text:   #60a5fa;
  --purple-text: #c084fc;

  /* Translucent colored borders at 0.3 alpha — state borders on selects/pills. */
  --blue-border:   rgba(59,130,246,0.3);
  --green-border:  rgba(34,197,94,0.3);
  --amber-border:  rgba(245,158,11,0.3);
  --red-border:    rgba(239,68,68,0.3);
  --orange-border: rgba(249,115,22,0.3);
  --purple-border: rgba(168,85,247,0.3);

  /* Calendar dispatch-cell tints — theme-aware. */
  --cell-past:    rgba(255,255,255,0.02);
  --cell-today:   rgba(59,130,246,0.10);
  --cell-weekend: rgba(255,255,255,0.04);

  /* Avatar palette extras (used by admin_users hash-to-color). */
  --avatar-teal:   #14b8a6;
  --avatar-violet: #8b5cf6;

  /* Darker green/orange variants for light-mode AA contrast on button text. */
  --green-strong:  #22c55e;
  --orange-strong: #f97316;

  /* Subtle inset ring used on avatar/chip surfaces. */
  --ring-inset: inset 0 0 0 1px rgba(0,0,0,0.18);

  /* Black text on amber background — stable in both themes. */
  --text-on-amber: #000;

  /* Calendar status-filter swatches — dark uses translucent saturated;
     light override (below) keeps the original soft pastels. */
  --filter-swatch-scheduled:  var(--amber-bg);
  --filter-swatch-inprogress: var(--amber-bg);
  --filter-swatch-done:       var(--blue-bg);
  --filter-swatch-hold:       var(--orange-bg);
  --filter-swatch-overdue:    var(--red-bg);

  /* Extended chart palette — theme-stable saturated swatches for analytics
     bars/pies. Stable across themes because they sit on neutral backgrounds. */
  --sky:   #0ea5e9;
  --cyan:  #06b6d4;
  --slate: #94a3b8;

  /* Tooltip pill — always-dark in both themes (conventional tooltip).
     Used by PDF Review annotation hover tooltips and any future
     always-dark contextual popovers. */
  --tooltip-bg:     rgba(15, 23, 42, 0.95);
  --tooltip-text:   #f8fafc;
  --tooltip-border: rgba(255, 255, 255, 0.08);
}

html[data-theme="light"] {
  --bg:       #fafafa;
  --bg-1:     #ffffff;
  --bg-2:     #ffffff;
  --bg-3:     #f5f5f5;
  --bg-4:     #ededed;
  --border:   #e8e8e8;
  --border-2: #dcdcdc;
  --border-3: #c4c4c4;
  --text:     #0a0a0a;
  --text-2:   #525252;
  --text-3:   #737373;
  --text-4:   #a3a3a3;
  --accent:   #0a0a0a;
  --shadow: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04);

  /* Lighter scrim for light theme where the underlying surface is near-white. */
  --scrim: rgba(0,0,0,0.5);
  /* --text-inverted intentionally inherits from :root (#fff). */

  /* Lighter foreground tints — darken for AA contrast on white. */
  --green-text:  #15803d;
  --amber-text:  #b45309;
  --orange-text: #c2410c;
  --red-text:    #b91c1c;
  --blue-text:   #1d4ed8;
  --purple-text: #7e22ce;

  /* Cell tints in light mode — invert source color (dark spotting on light grid). */
  --cell-past:    rgba(0,0,0,0.02);
  --cell-today:   rgba(59,130,246,0.06);
  --cell-weekend: rgba(0,0,0,0.04);

  /* Stronger green/orange for light-mode contrast on white surfaces. */
  --green-strong:  #15803d;
  --orange-strong: #c2410c;

  /* Lighter inset alpha for light surfaces. */
  --ring-inset: inset 0 0 0 1px rgba(0,0,0,0.08);

  /* Light-mode pastel filter swatches preserved from original design. */
  --filter-swatch-scheduled:  #fef9c3;
  --filter-swatch-inprogress: #fef3c7;
  --filter-swatch-done:       #dbeafe;
  --filter-swatch-hold:       #fed7aa;
  --filter-swatch-overdue:    #fee2e2;
}