/* ================================================================== *
 *  TalentRally — design tokens                                        *
 *                                                                     *
 *  THE single palette for the signed-in product. Before this file the *
 *  repo had three rival token sets (ai_interview.css, jobs.css,       *
 *  assessment.css) and dashboard.css ignored all of them — 563 hex    *
 *  literals and exactly one var() call, which is how a product ends   *
 *  up with four nearly-identical greys and no way to restyle safely.  *
 *                                                                     *
 *  Three layers, deliberately:                                        *
 *    1. STRUCTURAL — radii, shadows, timing, shell dimensions. These  *
 *       never change per theme.                                       *
 *    2. SEMANTIC   — colour by ROLE, not by hue (--primary, not       *
 *       --blue-600). Re-declared per theme; nothing else is.          *
 *    3. LEGACY     — the names ai_interview.css already used, kept as *
 *       aliases so its 154 var() calls keep working. Do not add new   *
 *       ones; new code uses the semantic layer.                       *
 *                                                                     *
 *  Load FIRST, before every other sheet.                              *
 * ================================================================== */

:root {
  /* ---------- 1. Structural ---------------------------------------- */
  /* Squarer than the old 8/12/16 ramp. Large radii read as a consumer
     app; a hiring tool people work in all day should read as an
     instrument. Only 12 rules in the repo reference these. */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  --shadow-sm: 0 1px 2px rgb(15 23 42 / .05);
  --shadow-md: 0 1px 2px rgb(15 23 42 / .04), 0 4px 12px rgb(15 23 42 / .05);
  --shadow-lg: 0 1px 2px rgb(15 23 42 / .04), 0 10px 30px rgb(15 23 42 / .06);

  --transition-fast: 150ms cubic-bezier(.4, 0, .2, 1);
  --transition-base: 200ms cubic-bezier(.4, 0, .2, 1);

  --sidebar-w: 15rem;
  --header-h: 60px;        /* matches the live .navbar height, so the
                              sidebar brand lockup aligns with it exactly */

  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'JetBrains Mono', ui-monospace, monospace;

  /* ---------- 2. Semantic (light) ----------------------------------- */
  --background: #ffffff;
  --foreground: #0f172a;
  --fg-strong: #1e293b;          /* headings, emphasised table cells   */
  --text: #334155;               /* default body copy                  */
  --text-soft: #475569;          /* secondary copy                     */
  --muted-foreground: #64748b;   /* captions, kickers, placeholders    */
  --muted: #94a3b8;              /* disabled ink, hairline glyphs      */

  --surface: #f8fafc;            /* page wash, table head, soft panels */
  --surface-2: #f1f5f9;          /* inputs, code blocks, hover fills   */
  --card: #ffffff;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --input: #cbd5e1;
  --ring: #2563eb;

  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-foreground: #ffffff;
  --primary-soft: #eff6ff;
  --primary-soft-2: #dbeafe;

  --accent: #4f46e5;
  --accent-soft: #eef2ff;

  --success: #16a34a;
  --success-strong: #15803d;
  --success-soft: #f0fdf4;
  --success-foreground: #ffffff;

  --warning: #d97706;
  --warning-strong: #b45309;
  --warning-ink: #92400e;
  --warning-soft: #fffbeb;
  --warning-foreground: #ffffff;

  --destructive: #dc2626;
  --destructive-strong: #b91c1c;
  --destructive-soft: #fef2f2;
  --destructive-foreground: #ffffff;

  /* Sidebar is its own slice of the contract so the shell can be
     re-skinned (or inverted) without touching the content area. */
  --sidebar: #ffffff;
  --sidebar-foreground: #475569;
  --sidebar-accent: #f1f5f9;
  --sidebar-border: #e2e8f0;

  /* ---------- 3. Legacy aliases ------------------------------------- */
  /* ai_interview.css declared these itself; its :root is now deleted and
     these keep its existing rules rendering. Do not use in new code. */
  --bg: var(--background);
  --bg-alt: var(--surface);
  --bg-section: var(--surface-2);
  --surface-hover: var(--surface);
  --border-focus: #3b82f6;
  --text-primary: var(--fg-strong);
  --text-secondary: var(--text-soft);
  --text-muted: var(--muted);
  --blue-50: var(--primary-soft);
  --blue-100: var(--primary-soft-2);
  /* --blue-200 was USED by ai_interview.css but never declared in its own
     :root — the report-button hover border silently fell back to
     currentColor. Declared here because this file now owns the palette. */
  --blue-200: #bfdbfe;
  --blue-500: #3b82f6;
  --blue-600: var(--primary);
  --blue-700: var(--primary-hover);
  --indigo-600: var(--accent);
  --green-50: var(--success-soft);
  --green-500: #22c55e;
  --green-600: var(--success);
  --red-50: var(--destructive-soft);
  --red-500: #ef4444;
  --red-600: var(--destructive);
  --amber-50: var(--warning-soft);
  --amber-500: #f59e0b;
  --amber-600: var(--warning);
  --radius: var(--radius-lg);
  --font: var(--font-sans);
  --mono: var(--font-mono);
  --shadow: var(--shadow-sm);
  --transition: var(--transition-fast);
}