/* ============================================================
   CareerCompass design tokens — Section 8 (SOURCE OF TRUTH).
   North star: Apple.com / cursor.com. One near-black ink accent,
   nothing blue, no gradients, no glass. Tokens are consumed
   everywhere; screens never invent colors/shadows/radii.
   ============================================================ */
:root {
  /* surfaces */
  --bg: #FAFAFB;
  --surface: #FFFFFF;
  --surface-2: #F4F5F7;

  /* lines */
  --border: #E5E7EB;
  --border-strong: #D1D5DB;

  /* text (body >= 4.5:1 on white) */
  --text: #111827;
  --text-2: #4B5563; /* 600-step: 4.5:1+ on surface-2 / accent-soft as well (6.70-7.56:1) */

  /* accent — near-black ink, used sparingly, NEVER blue */
  --accent: #18181B;
  --accent-hover: #0C0C0E;
  --accent-soft: #F1F1F3;

  /* semantic (700-step text values: >= 4.5:1 on both the soft tint and white — WCAG AA text) */
  --success: #15803D;
  --success-soft: #DCFCE7;
  --warning: #B45309;
  --warning-soft: #FEF3C7;
  --danger: #B91C1C;
  --danger-soft: #FEE2E2;

  /* radius */
  --radius-card: 10px;
  --radius-input: 8px;
  --radius-chip: 6px;

  /* spacing (4px scale only) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;

  /* shadow (the subtlest allowed) */
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-pop: 0 4px 12px rgba(16, 24, 40, 0.10);

  /* motion (Section 8.5) */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 450ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --stagger: 40ms;

  /* type */
  --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fs-base: 14px;
  --fs-small: 12px;
  --fs-h1: 20px;
  --fs-kpi: 28px;

  /* layout */
  --sidebar-w: 240px;
  --topbar-h: 56px;
  --content-max: 1200px;
  --gutter: 24px;
}