/* tokens.css — RRHH design tokens (UI-R1).
   Single source of truth for the visual language: a rebrand is a token-value
   edit here, nothing else. Consumed exclusively via var() by app.css.
   Dark mode is a non-goal (UI-R1). */
:root {
  --color-primary: #0F172A; --color-action: #2563EB; --color-accent: #0D9488;
  --color-bg: #F8FAFC; --color-surface: #FFFFFF; --color-border: #E2E8F0;
  --color-muted: #64748B; --color-error: #DC2626; --color-warning: #D97706;
  --color-success: #059669; --color-info: #2563EB;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px;
  --radius-sm: 6px; --radius-md: 10px;
  --shadow: 0 1px 3px rgba(15,23,42,.08);
  --breakpoint-sm: 480px; --breakpoint-md: 768px;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --focus-ring: 0 0 0 3px rgba(37,99,235,.35);   /* R7 */
  /* M3 elevation / state / motion / tonal (UI-R9) */
  --elevation-1: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.10);
  --elevation-2: 0 2px 4px rgba(15,23,42,.08), 0 4px 12px rgba(15,23,42,.12);
  --elevation-3: 0 4px 8px rgba(15,23,42,.10), 0 8px 24px rgba(15,23,42,.16);
  --state-hover: rgba(37,99,235,.08); --state-active: rgba(37,99,235,.16);
  --state-hover-surface: rgba(15,23,42,.05);
  --motion-duration-1: 120ms; --motion-duration-2: 200ms;
  --motion-easing: cubic-bezier(0.2, 0, 0, 1);
  --surface-tonal: color-mix(in srgb, var(--color-action) 6%, var(--color-surface));
  /* M3 component set (ui-m3-components): dialog scrim + full pill radius (D7) */
  --overlay-scrim: rgba(15,23,42,.45); --radius-full: 999px;
  /* dashboard-ui-redesign additive set (UI-R1 MODIFIED, UI-S44): rail
     surface/text pair, content-column gradient, accent hairline
     fills, icon-chip tints as color-mix of the accent tokens (design D5),
     12px card radius and the AA-verified value numerics (UI-R7).
     Phase 6 walkthrough revision: the rail moved off near-black to the
     slate-800 family (#1E293B, idle text #CBD5E1 = 9.85:1, active white =
     14.63:1 — AA holds) with a 1px #334155 separator hairline. */
  --sidebar-bg: #1E293B; --sidebar-border: #334155; --sidebar-text: #CBD5E1;
  --sidebar-active-bg: rgba(13,148,136,.18); --sidebar-active-text: #FFFFFF;
  --sidebar-w: 15.5rem;
  /* Phase 6 revision: the wash runs left→right (strongest tint at the
     content's left edge, fading into the page surface by 70%). */
  --grad-left: #E3F4F2; --grad-mid: #ECF7F6; --grad-right: #F8FAFC;
  --accent-teal: #0D9488; --accent-green: #059669; --accent-red: #DC2626;
  --chip-teal-bg: color-mix(in srgb, var(--accent-teal) 8%, var(--color-surface));
  --chip-green-bg: color-mix(in srgb, var(--accent-green) 8%, var(--color-surface));
  --chip-red-bg: color-mix(in srgb, var(--accent-red) 8%, var(--color-surface));
  --radius-card: 12px;
  --color-value-positive: #047857; --color-value-negative: #DC2626;
  --color-value-accent: #0F766E;
  /* Phase 6 (walkthrough feedback 5): neutral-count blue, AA verified —
     6.70:1 on white, 6.41:1 on the #F8FAFC content surface. */
  --color-value-blue: #1D4ED8;
}