/* ════════════════════════════════════════════════════════════════
   tokens.css — HireYT Design System · single source of truth
   Loaded AFTER app.css so these win the cascade. Defines the new
   canonical tokens AND re-points every legacy token to them, so all
   42 existing pages adopt the new light/warm/orange palette at once.
   Light theme only. No blue chrome.
   ════════════════════════════════════════════════════════════════ */
:root {
  /* ── Canonical palette ───────────────────────────────────────── */
  --accent:             #E8643C;
  --accent-hover:       #C9502C;
  --accent-tint:        #FCEEE8;
  --accent-tint-border: #F3D6C8;
  --shell-bg:           #FBFAF8;
  --content-bg:         #FFFFFF;
  --ds-border:          #ECE8E3;
  --row-divider:        #F1ECE6;
  --row-hover:          #FBF6F3;
  --text-primary:       #1C1A17;
  --text-secondary:     #6B655D;
  --text-faint:         #9A938A;

  /* Status (the ONLY semantic colors — text on tint) */
  --st-success:    #2F855A; --st-success-bg: #E7F3EC; --st-success-bd:#C6E6D2;
  --st-warning:    #B7791F; --st-warning-bg: #FBF1DE; --st-warning-bd:#EBD9B0;
  --st-danger:     #C53030; --st-danger-bg:  #FBEAEA; --st-danger-bd: #F0C9C9;
  --st-neutral:    #5A6472; --st-neutral-bg: #EEF0F2; --st-neutral-bd:#D9DEE4;

  /* ── Legacy alias layer — repoint old names to the new palette ── */
  --brand:        var(--accent);
  --brand-dark:   var(--accent-hover);
  --brand-hover:  var(--accent-hover);
  --brand-light:  var(--accent-tint);
  --brand-mid:    var(--accent-tint);
  --brand-glow:   rgba(232,100,60,0.20);
  --accent-2:     var(--accent);

  --bg:           var(--shell-bg);
  --surface:      var(--content-bg);
  --surface2:     var(--shell-bg);
  --surface3:     #F4F0EB;
  --surface4:     var(--ds-border);

  --border:       var(--ds-border);
  --border-light: var(--row-divider);
  --border-hover: #DCD6CE;
  --border-focus: var(--accent);

  --text:         var(--text-primary);
  --text2:        var(--text-secondary);
  --text-muted:   var(--text-secondary);
  --text-light:   var(--text-faint);
  --text-xlight:  #C9C2B8;

  /* Semantic status — mapped onto the 4-color system */
  --green: var(--st-success); --green-dark:#276749; --green-bg:var(--st-success-bg); --green-border:var(--st-success-bd);
  --amber: var(--st-warning); --amber-dark:#975A16; --amber-bg:var(--st-warning-bg); --amber-border:var(--st-warning-bd);
  --red:   var(--st-danger);  --red-dark:#9B2C2C;   --red-bg:var(--st-danger-bg);   --red-border:var(--st-danger-bd);
  /* Kill blue/purple/cyan chrome — collapse decorative colors to neutral slate */
  --blue:   var(--st-neutral); --blue-dark:#3F4757;  --blue-bg:var(--st-neutral-bg);  --blue-border:var(--st-neutral-bd);
  --purple: var(--st-neutral); --purple-dark:#3F4757;--purple-bg:var(--st-neutral-bg);--purple-border:var(--st-neutral-bd);
  --cyan:   var(--st-neutral); --cyan-dark:#3F4757;  --cyan-bg:var(--st-neutral-bg);  --cyan-border:var(--st-neutral-bd);
  --teal:   var(--st-success); --teal-bg:var(--st-success-bg);

  /* ── Light shell (sidebar + topbar) ──────────────────────────── */
  --sidebar-bg:            var(--shell-bg);
  --sidebar-bg2:           #F4F0EB;
  --sidebar-text:          var(--text-secondary);
  --sidebar-hover:         rgba(28,26,23,0.04);
  --sidebar-active:        var(--accent-tint);
  --sidebar-active-text:   var(--accent);
  --sidebar-active-border: var(--accent);
  --sidebar-section:       var(--text-faint);
  --sidebar-border:        var(--ds-border);
  --sidebar-w:             168px;   /* spec asks ~158; widened slightly so long admin labels don't truncate */

  /* ── Radius — 6px everywhere ─────────────────────────────────── */
  --r-xs: 6px; --r-sm: 6px; --r: 6px; --r-md: 6px; --r-lg: 8px; --r-xl: 10px;
  --radius-xs: 6px;

  /* ── Shadows — none in-flow; soft only for popovers/modals ───── */
  --shadow-xs: none;
  --shadow:    none;
  --shadow-md: 0 4px 16px rgba(28,26,23,0.08);
  --shadow-lg: 0 8px 28px rgba(28,26,23,0.12);
  --shadow-xl: 0 16px 48px rgba(28,26,23,0.16);

  /* ── Type — Inter, tabular figures ───────────────────────────── */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

/* Tabular, lining figures for the whole data app (IDs, rates, dates, phones). */
body { font-feature-settings: 'tnum' 1, 'lnum' 1; font-variant-numeric: tabular-nums lining-nums; }

/* ── Shell rules that were hardcoded for the old dark sidebar ───── */
.sidebar-item:hover { color: var(--text-primary); }
.sidebar::-webkit-scrollbar-thumb { background: rgba(28,26,23,0.14); }
.sidebar { scrollbar-color: rgba(28,26,23,0.14) transparent; }
/* Sidebar wordmark: ensure it reads on the light shell */
.sidebar-logo, .sidebar-logo * { color: var(--text-primary); }