/* ===========================================================================
   tokens.css — LED Works HR design tokens (Session 2 reskin).
   The single source of truth for palette, scale, type, radius, elevation.
   Loaded BEFORE components.css and style.css. "Professional SaaS, not
   PayrollHero": one accent (brand red, used sparingly), a neutral gray scale,
   semantic tokens, an 8px spacing scale, tabular numerals for figures.
   =========================================================================== */
:root {
  /* Neutral gray scale (cool slate) 50 → 900 */
  --gray-50:#f8fafc;  --gray-100:#f1f5f9; --gray-200:#e9edf2; --gray-300:#d5dbe3;
  --gray-400:#a3adba; --gray-500:#6b7684; --gray-600:#4d5866; --gray-700:#374151;
  --gray-800:#1f2937; --gray-900:#0f172a;

  /* Accent — LED Works brand red. Actions & focus only, never decoration. */
  --accent:#d92d20; --accent-hover:#b42318; --accent-active:#912018;
  --accent-weak:#fef3f2; --accent-ink:#ffffff; --accent-ring:rgba(217,45,32,.35);

  /* Status */
  --ok:#067647;     --ok-weak:#ecfdf3;
  --warn:#b54708;   --warn-weak:#fffaeb;
  --danger:#d92d20; --danger-weak:#fef3f2;
  --info:#175cd3;   --info-weak:#eff6ff;

  /* Role tints (owner / hr distinguishable) */
  --owner:#6941c6;  --owner-weak:#f4f0ff;
  --hr:#175cd3;     --hr-weak:#eff6ff;

  /* Semantic surface tokens */
  --bg:var(--gray-50);
  --surface:#ffffff;
  --surface-2:var(--gray-100);
  --line:var(--gray-200);
  --line-strong:var(--gray-300);
  --ink:var(--gray-900);
  --ink-2:var(--gray-700);
  --muted:var(--gray-500);
  --field-border:var(--gray-300);

  /* Sidebar (neutral dark so the red accent stays sparing) */
  --side-bg:#0f172a; --side-bg-2:#16213a; --side-ink:#c3cad6;
  --side-ink-strong:#ffffff; --side-active:#1c2b48; --side-hover:#16213a;

  /* Typography */
  --font: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --fs-xs:11.5px; --fs-sm:12.5px; --fs-md:14px; --fs-lg:16px; --fs-xl:20px; --fs-2xl:26px;

  /* Spacing scale (8px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;

  /* Radius scale */
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-pill:999px;

  /* Elevation (two shadows) */
  --shadow-1:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --shadow-2:0 4px 8px -2px rgba(16,24,40,.10), 0 2px 6px -2px rgba(16,24,40,.06);

  /* Layout */
  --side-w:224px; --side-w-collapsed:64px; --topbar-h:56px; --content-max:1200px;

  /* --- Backward-compatible aliases (existing markup/legacy CSS still resolve) --- */
  --brand:var(--accent); --brand-dark:var(--accent-hover);
  --card:var(--surface); --watch:var(--warn); --side-link:var(--side-ink);
}

/* Dark mode is wired (tokens flip) but v1 ships light-only. Values are sensible
   so a future dark launch is a one-line theme flip, not a rebuild. */
@media (prefers-color-scheme: dark) {
  :root.theme-dark-ready {
    --bg:#0b1220; --surface:#111a2b; --surface-2:#0f1728; --line:#22304a;
    --line-strong:#2c3d5c; --ink:#eef2f8; --ink-2:#c3cad6; --muted:#8a96a8;
    --field-border:#2c3d5c;
    --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 6px 16px rgba(0,0,0,.5);
  }
}

/* ESS Phase 3 polish */
.ess-wrap .tabbar{display:flex;flex-wrap:nowrap;gap:.35rem;overflow-x:auto;scrollbar-width:thin;padding:.35rem .15rem .55rem;margin:.5rem 0 1rem;white-space:nowrap}
.ess-wrap .tabbar a{display:inline-flex;align-items:center;gap:.4rem;flex:0 0 auto;border-radius:999px;padding:.72rem .95rem;text-decoration:none;line-height:1;font-weight:700;border:1px solid var(--border, #e5e7eb);background:var(--surface, #fff)}
.ess-wrap .tabbar a.on{background:var(--brand-50,#fff1f2);border-color:var(--brand,#d92d20);box-shadow:inset 0 -3px 0 var(--brand,#d92d20)}
.ess-tab-icon{font-size:1rem}.ess-switch{display:inline-flex;align-items:center;gap:.55rem;border:0;background:transparent;font-weight:800;cursor:pointer}.ess-switch-track{width:48px;height:28px;border-radius:999px;background:#9ca3af;position:relative;transition:.18s}.ess-switch-knob{position:absolute;width:22px;height:22px;left:3px;top:3px;border-radius:50%;background:white;box-shadow:0 1px 4px #0004;transition:.18s}.ess-switch[aria-checked="true"] .ess-switch-track{background:var(--brand,#d92d20)}.ess-switch[aria-checked="true"] .ess-switch-knob{transform:translateX(20px)}
.ess-switch-banner.danger{position:sticky;top:0;z-index:5;background:#fee2e2;color:#991b1b;border:1px solid #fecaca;border-radius:14px;padding:.7rem 1rem;display:flex;justify-content:space-between;gap:1rem;align-items:center;font-weight:800}.ess-fab{position:fixed;right:18px;bottom:18px;z-index:20}.ess-fab-main{width:56px;height:56px;border-radius:50%;font-size:1.5rem;box-shadow:0 12px 30px #0003}.ess-fab-menu{display:none;position:absolute;right:0;bottom:66px;background:var(--surface,#fff);border:1px solid var(--border,#e5e7eb);border-radius:16px;padding:.5rem;box-shadow:0 16px 40px #0002;min-width:190px}.ess-fab.open .ess-fab-menu{display:grid;gap:.4rem}.ess-fab-menu button{white-space:nowrap}.performance-page .performance-welcome{background:linear-gradient(135deg,#fff7ed,#fee2e2);border-radius:22px;padding:1.1rem}.performance-progress{width:100%;height:14px}.request-action-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}.request-action-card{border:1px solid var(--border,#e5e7eb);border-radius:18px;padding:1rem;background:var(--surface,#fff)}
@media (max-width:430px){.ess-wrap .tabbar a{padding:.68rem .82rem}.ess-fab{bottom:14px;right:14px}.ess-main{padding-bottom:86px}}

/* ESS Phase 3 mobile-first request sub-tabs + gamified performance UI */
.ess-subtabs{display:flex;gap:.5rem;overflow:auto;padding:.25rem 0 .75rem;position:sticky;top:0;background:var(--bg,#f8fafc);z-index:2}.ess-subtabs a{white-space:nowrap;border:1px solid var(--border,#e5e7eb);border-radius:999px;background:var(--surface,#fff);padding:.55rem .8rem;font-weight:800;text-decoration:none;color:var(--text,#111827)}.ess-subtabs a.on{background:var(--primary,#111827);border-color:var(--primary,#111827);color:#fff;box-shadow:0 8px 18px #0002}.ess-subtabs a.needs-action:not(.on){border-color:#f59e0b;background:#fffbeb;color:#92400e}.ess-subtabs a.needs-action::after{content:'•';color:#f59e0b;margin-left:.35rem}.ess-request-panel{display:grid;gap:1rem;scroll-margin-top:72px}.ess-request-history{min-width:0}.request-history-label{font-weight:900;text-transform:uppercase;letter-spacing:.04em;margin:.25rem 0 .5rem}.request-action-card{border:1px solid var(--border,#e5e7eb);border-radius:18px;padding:1rem;background:var(--surface,#fff);display:flex;align-items:center;justify-content:space-between;gap:1rem}.request-action-card h2{margin:0}.request-action-card p{margin:.25rem 0 0;color:var(--muted,#64748b)}.request-action-card button{min-height:44px}.request-list{display:grid;gap:.65rem}.request-row{border:1px solid var(--border,#e5e7eb);border-radius:16px;padding:.85rem;background:var(--surface,#fff)}.request-row-main{min-width:0}.request-row-top{display:flex;justify-content:space-between;gap:.8rem;align-items:flex-start}.request-row-top>b{min-width:0}.request-row-detail{margin-top:.25rem}.swap-timeline{margin-top:.55rem}.swap-timeline span{display:block;margin-top:.3rem;color:var(--muted,#64748b);font-size:.85rem}.swap-timeline summary{cursor:pointer;font-weight:800;color:var(--text,#111827)}.performance-hero{display:flex;justify-content:space-between;gap:1rem;align-items:center;background:linear-gradient(135deg,#fff7ed,#dcfce7);border:1px solid #fed7aa;border-radius:24px;padding:1.2rem}.perf-flame{font-size:2.1rem}.perf-streak{display:grid;place-items:center;min-width:128px;border-radius:22px;background:#fff;padding:1rem;box-shadow:0 10px 24px #0001}.perf-streak b{font-size:2.5rem;color:#16a34a}.perf-streak span{text-align:center;font-size:.85rem;color:var(--muted,#64748b);font-weight:800}.perf-celebration{margin:.85rem 0;border:1px solid #bbf7d0;background:#f0fdf4;color:#166534;border-radius:18px;padding:.85rem;font-weight:900}.week-row,.perf-rings,.perf-badges{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.5rem;margin:1rem 0}.week-dot{display:grid;place-items:center;border:1px solid var(--border,#e5e7eb);border-radius:16px;padding:.5rem;background:#fff}.week-dot span{font-size:.72rem;color:var(--muted,#64748b);font-weight:900}.week-dot b{font-size:1.1rem}.week-dot.filled{background:#dcfce7;border-color:#86efac;color:#15803d}.week-dot.muted{background:#f1f5f9;color:#94a3b8}.week-dot.hollow{background:#fff;color:#94a3b8}.perf-rings{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.perf-ring-card{border:1px solid var(--border,#e5e7eb);border-radius:20px;background:#fff;padding:1rem;text-align:center}.perf-ring{width:128px;max-width:100%}.perf-ring-bg{fill:none;stroke:#e5e7eb;stroke-width:4}.perf-ring-fg{fill:none;stroke:#f59e0b;stroke-width:4;stroke-linecap:round}.perf-ring.healthy .perf-ring-fg{stroke:#22c55e}.perf-ring text{font-size:.42rem;font-weight:900;text-anchor:middle;fill:#111827}.perf-badges{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.perf-badge{border:1px solid var(--border,#e5e7eb);border-radius:18px;padding:.8rem;text-align:center;display:grid;gap:.25rem}.perf-badge-icon{font-size:1.6rem}.perf-badge span{font-size:.75rem;color:var(--muted,#64748b)}.perf-badge.earned{background:#fef3c7;border-color:#f59e0b}.perf-badge.locked{background:#f1f5f9;filter:grayscale(1);opacity:.72}.perf-trend{width:100%;height:110px;background:#f8fafc;border-radius:18px}.perf-trend rect{fill:#22c55e}@media (max-width:700px){.request-action-card{display:grid}.request-action-card button{width:100%}.request-row-top{display:grid}.performance-hero{display:grid}.perf-streak{width:100%}.week-row{gap:.35rem}.week-dot{border-radius:12px;padding:.4rem .2rem}.ess-subtabs{margin-inline:-.25rem;padding-inline:.25rem}}
.request-list{max-height:56vh;overflow-y:auto;overscroll-behavior:contain;padding-right:.15rem}.empty .request-list{max-height:none}.perf-money-stat{display:flex;gap:1rem;align-items:center;border:1px solid #bbf7d0;background:#f0fdf4;border-radius:22px;padding:1rem;margin:1rem 0}.perf-money-emoji{font-size:2rem}.perf-money-big{font-size:2rem;font-weight:950;color:#15803d;font-variant-numeric:tabular-nums}.perf-benefits{margin:1rem 0}.perf-benefits .cards{grid-template-columns:repeat(2,minmax(0,1fr))}.perf-standing{border:1px solid #fde68a;background:#fffbeb;border-radius:18px;padding:1rem;margin:1rem 0}.perf-standing.good{border-color:#bbf7d0;background:#f0fdf4}.perf-standing-pill{display:inline-flex;border-radius:999px;padding:.25rem .55rem;background:#fff;font-weight:900;margin-right:.35rem}.issue-kanban{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;align-items:start}.issue-column{border:1px solid var(--border,#e5e7eb);background:var(--surface,#fff);border-radius:18px;padding:.75rem;min-width:0}.issue-column-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}.issue-column-head span{border-radius:999px;background:#f1f5f9;padding:.15rem .5rem;font-weight:900}.issue-column-list{display:grid;gap:.65rem}.issue-kanban-card{border:1px solid var(--border,#e5e7eb);border-radius:16px;padding:.75rem;background:#fff;cursor:pointer}.issue-kanban-card p{margin:.45rem 0 0}.issue-card-meta{display:flex;gap:.45rem;align-items:center;color:var(--muted,#64748b);font-size:.82rem}.issue-mobile-status{display:none;margin-top:.55rem;width:100%}.issue-empty{padding:.6rem}
@media (max-width:700px){.request-list{max-height:48vh}.perf-benefits .cards,.issue-kanban{grid-template-columns:1fr}.perf-money-stat{align-items:flex-start}.issue-mobile-status{display:block}}