/* ============================================================================
   Smart Hiring — Design Tokens  ·  "one family, three expressions"
   Arabic-first (RTL), multi-portal ATS. Reference foundation for docs/design.
   HR is on #3E028D since SUI4 (the founder, 2026-10-18; the logo's violet too): ramp «C», a purple-indigo at
   OKLCH hue 290.5 where #3E028D is the 700 (light 500 #5C28BF), on a lavender page (#F0EFFC) with faint violet
   lines; dark is «فحمي», a near-neutral graphite (#0E0E12 page, #1F1E23 cards, #29282E raised rows) that keeps
   the violet for actions, dark 500 #7F5BE9. The rail is graphite (#060609) in both themes. Before it, S19e-5c's
   «trial 3» indigo (#565EDE). Candidate and admin are unchanged.

   This is the SPEC that packages/ui consumes at S6 (docs/00). It is authored to
   drop verbatim into apps/web/src/styles/tokens.css if an interim overhaul runs
   first. Anchored on docs/design/mockups/06-midnight-indigo-pro.html.

   ── HOW IT'S LAYERED ──────────────────────────────────────────────────────
   SPINE   :root              shared by every portal (the "connection") +
                              HR-indigo defaults, LIGHT.
   THEME   .dark              light↔dark is ORTHOGONAL to portal; composes with
                              any [data-portal].
   SKIN    [data-portal=…]    each portal overrides ONLY: primary, accent,
                              --radius, --density, ink-inverse (if needed),
                              a subtle surface tint, sidebar rail, chart lead.
                              Everything else (type, spacing, motion, shadows,
                              semantic colors, components) is inherited = identical.

   Portal × theme matrix → each portal needs a light scope AND a `.dark` scope
   (so e.g. candidate-dark = emerald-dark, not the inherited indigo-dark).
   Specificity: [data-portal=x] and .dark are equal (0,1,0); [data-portal=x].dark
   is (0,2,0) and is declared last, so it always wins for the dark+portal case.

   ── HOW IT'S CONSUMED ─────────────────────────────────────────────────────
   Colors are space-separated RGB triplets so Tailwind alpha works:
     tailwind.config.js →  primary: { 500: 'rgb(var(--primary-500) / <alpha-value>)' }
     usage              →  class="bg-primary-500 text-ink-inverse border-line/50"
   --density is a scalar components multiply comfortable spacing by:
     padding: calc(var(--density) * 0.75rem)   (1.0 dense · 1.15 airy · 0.9 compact)
   --radius is the portal-tunable card radius. --line-focus / --shadow-brand
   both reference var(--primary-500) so focus rings and glow auto-follow each skin.

   ── A11y (button text on primary-500, both themes; AA = ≥4.5:1) ─────────────
   HR        light  white / #5C28BF  8.4:1   dark  white / #7F5BE9  4.6:1
             (dark 600 sits LIGHTER than 500 — a text tone, ≥ 4.5:1 on cards and raised rows — so a white-text
             fill uses 500 in dark)
   Candidate light  white / #15803D  4.8:1   dark  ink#052414 / #22C55E  8.2:1
   Admin     light  ink#291804 / #D97706  6.5:1  dark ink#291804 / #F59E0B  ~9:1
   (Amber can't take white text → admin overrides --ink-inverse to near-black in
    both themes. Candidate flips --ink-inverse to dark-green in dark only.)
   ============================================================================ */

/* ════════════════════════════ SPINE + HR (light) ════════════════════════════ */
/* `.light` mirrors `:root` so a light island can reset itself inside a `.dark`
   ancestor (kitchen-sink matrix, light-on-dark sections) — added at S6, kept in
   sync here so this spec matches the shipped packages/ui copy. */
:root,
.light {
  color-scheme: light;

  /* — type (shared) — body Arabic-first; display = Latin/numerals, Arabic falls back — */
  --font-sans:    'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Space Grotesk', 'IBM Plex Sans Arabic', sans-serif;
  --font-mono:    ui-monospace, 'JetBrains Mono', 'Fira Code', monospace;

  /* — spacing scale (shared) + density knob (per-portal) — */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;
  --density: 1;                       /* SKIN overrides: HR 1 · candidate 1.15 · admin .9 */

  /* — radius (shared scale; --radius is per-portal) — */
  --radius-sm: 8px; --radius-md: 12px; --radius: 16px; --radius-lg: 20px; --radius-full: 9999px;

  /* — motion (shared) — */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --transition-fast:   150ms var(--ease);
  --transition-normal: 260ms var(--ease);
  --transition-slow:   420ms var(--ease);

  /* — elevation (shared; brand glow auto-follows --primary-500) — */
  --shadow-card:  0 1px 2px rgb(24 25 40 / .06), 0 8px 24px rgb(24 25 40 / .07);
  --shadow-pop:   0 18px 44px rgb(24 25 40 / .18);
  --shadow-brand: 0 6px 20px rgb(var(--primary-500) / .3);

  /* — z-index (shared) — */
  --z-base: 0; --z-sticky: 30; --z-dropdown: 40; --z-overlay: 50;
  --z-modal: 60; --z-toast: 70; --z-tooltip: 80; --z-command: 90;

  /* — surfaces · ink · lines (SKIN may tint; HR = violet-whisper light) — */
  /* --surface-50 is the page behind the white cards: a visible lavender (the founder, 2026-10-15), turned to
     #3E028D's hue at SUI4 (lightness and chroma kept). */
  --surface-0: 255 255 255; --surface-50: 240 239 252; --surface-100: 237 235 249;
  --surface-200: 227 225 243; --surface-300: 209 206 232;
  --ink: 24 25 40; --ink-2: 58 60 86; --ink-3: 92 96 124; --ink-4: 148 152 178;
  --ink-inverse: 255 255 255;                  /* text on --primary-500 (SKIN: admin/candidate flip) */
  --line: 227 225 243; --line-strong: 207 204 230; --line-focus: var(--primary-500);

  /* — semantic colors (SHARED across all portals — never skinned) — */
  --success-50: 233 247 238; --success-100: 205 236 217; --success-200: 154 214 178;
  --success-500: 34 160 87;  --success-600: 24 134 70;   --success-700: 21 110 60;
  --warning-50: 253 244 228; --warning-100: 250 231 196; --warning-200: 244 206 132;
  --warning-500: 217 142 18; --warning-600: 178 113 12;  --warning-700: 142 89 12;
  --danger-50: 252 237 236;  --danger-100: 249 214 212;  --danger-200: 243 173 170;
  --danger-500: 224 72 68;   --danger-600: 196 54 50;    --danger-700: 156 43 40;
  --info-50: 230 240 252;    --info-100: 203 224 248;     --info-200: 156 195 240;
  --info-500: 46 113 222;    --info-600: 34 90 188;       --info-700: 28 72 150;

  /* — primary = HR violet, ramp «C»: #3E028D is the 700 (SUI4; SKIN overrides). 50–400 keep trial 3's
     lightness; 500 up carry the founder's chroma, so the deep steps read purple, never navy. — */
  --primary-50: 240 239 255; --primary-100: 230 226 255; --primary-200: 204 196 254;
  --primary-300: 171 155 247; --primary-400: 141 113 238; --primary-500: 92 40 191;
  --primary-600: 79 11 173;   --primary-700: 62 2 141;    --primary-800: 49 0 116;
  --primary-900: 39 0 94;     --primary-950: 28 0 73;
  /* The hover fill of a primary-500 button. It keeps --ink-inverse at AA (≥ 4.5:1), so it DARKENS where the
     button text is white (HR, candidate light) and BRIGHTENS where it is dark (admin, candidate dark). Every skin
     re-declares it, so it resolves against that skin's own ramp (S19e-5c). */
  --primary-hover: var(--primary-600);
  /* The funnel's five stage fills and the ink of the words on them (FunnelChart, SUI4b). Each stage stands further from
     the card than the one above it — darker in light, brighter in dark — and every label and count clears 4.5:1 on its
     fill. Every skin re-declares them, so they resolve against its own ramp. Here: white on 500 → 900, 8.4–16.8:1. */
  --funnel-1: var(--primary-500); --funnel-2: var(--primary-600); --funnel-3: var(--primary-700);
  --funnel-4: var(--primary-800); --funnel-5: var(--primary-900); --funnel-ink: var(--ink-inverse);
  /* --brand, --brand-ink and --brand-contrast (the org careers overlay: a raw brand fill, its per-theme AA text
     variant, and text on a brand fill — design-system §4) were removed on 2026-10-22 with the careers pages, the only
     surface that drew them. --shadow-brand is unrelated: it is the primary buttons' glow, and stays. */

  /* — accent = HR cyan (SKIN overrides) — */
  --accent-50: 224 244 251; --accent-100: 195 233 247; --accent-200: 145 213 238;
  --accent-500: 14 165 207; --accent-600: 8 134 170;   --accent-700: 12 108 138;

  /* — charts (chart-1/-2/-cursor lead with portal hue; 4–8 shared) — */
  /* chart-3 is HR's own since SUI4, a burnt orange: the dashboard draws three series, and the shared violet sat
     ΔE 2.4 from the violet chart-1 (the dataviz validator; ΔE 4.8 already on trial 3). Candidate and admin
     re-declare the violet. */
  --chart-1: 92 40 191; --chart-2: 14 165 207; --chart-3: 194 65 12; --chart-4: 219 64 140;
  --chart-5: 13 148 136; --chart-6: 200 138 24; --chart-7: 70 74 96;  --chart-8: 205 209 228;
  --chart-grid: 226 229 241; --chart-axis: 92 96 124; --chart-cursor: 92 40 191;
  /* — ambient glows (base.css .sh-blob-2/-3; the primary's .sh-blob-1 stays): «فحمي» keeps only the primary's
     (SUI4). Custom properties inherit, so the other skins re-declare their .10 / .08. — */
  --ambient-2-o: 0; --ambient-3-o: 0;

  /* — sidebar rail component tokens (SKIN swaps the whole rail) — */
  /* The light theme's rail is the dark theme's night too (the founder, 2026-10-15): «فحمي»'s graphite since SUI4. */
  --sidebar-surface: 6 6 9; --sidebar-ink: 243 243 246; --sidebar-ink-2: 169 168 176;
  --sidebar-active-bg: 35 32 48; --sidebar-active-ink: 189 178 255; --sidebar-line: 29 28 33;

  /* — neutral ramp (shared; inverted in .dark — un-skinned surfaces stay legible) — */
  --neutral-50: 244 245 251; --neutral-100: 236 238 247; --neutral-200: 221 224 238;
  --neutral-300: 198 202 222; --neutral-400: 156 160 184; --neutral-500: 118 122 148;
  --neutral-600: 90 94 122;   --neutral-700: 66 70 98;    --neutral-800: 44 46 72;
  --neutral-900: 24 25 40;
}

/* ════════════════════════════ THEME: dark (HR) ════════════════════════════
   Orthogonal to portal. Overrides surfaces/ink/line + the violet primary/accent/
   semantics/charts/sidebar to their dark values. Candidate/Admin re-skin below. */
.dark {
  color-scheme: dark;

  /* «فحمي» (SUI4): a near-neutral graphite, one visible step per layer — page < card < raised row. */
  --surface-0: 31 30 35; --surface-50: 14 14 18; --surface-100: 41 40 46;
  --surface-200: 52 51 58; --surface-300: 67 67 75;
  --ink: 243 243 246; --ink-2: 207 206 212; --ink-3: 169 168 176; --ink-4: 128 127 136;
  --ink-inverse: 255 255 255;
  --line: 51 50 57; --line-strong: 70 69 78;

  --success-50: 14 38 27; --success-100: 18 52 37; --success-200: 26 78 54;
  --success-500: 52 184 112; --success-600: 42 158 95; --success-700: 116 220 162;
  --warning-50: 42 32 12; --warning-100: 56 42 16; --warning-200: 84 62 24;
  --warning-500: 226 166 56; --warning-600: 202 142 40; --warning-700: 244 198 122;
  --danger-50: 46 22 22; --danger-100: 60 28 28; --danger-200: 90 40 40;
  /* danger-600 is TEXT on a surface: 208 70 66 read 4.0:1 on the indigo night — raised (S19e-5c). One fill does use it, the
     danger Button, which therefore takes the near-black `surface-50` as its text in dark (S19f-3; white read 2.95:1). */
  --danger-500: 232 96 92; --danger-600: 236 112 108; --danger-700: 244 158 154;
  --info-50: 16 30 54; --info-100: 20 40 70; --info-200: 30 60 104;
  --info-500: 88 152 240; --info-600: 66 128 216; --info-700: 150 188 248;

  --primary-50: 36 24 72;    --primary-100: 48 32 93;   --primary-200: 75 49 145;
  --primary-300: 110 76 205; --primary-400: 149 123 248; --primary-500: 127 91 233;
  --primary-600: 151 130 240; --primary-700: 189 178 255; --primary-800: 213 207 255;
  --primary-900: 228 225 254; --primary-950: 242 241 254;
  --primary-hover: var(--primary-300);     /* the dark 600 sits LIGHTER than 500 (a text tone): the hover darkens */
  /* The funnel: past 500 this ramp turns lighter, and white clears 4.5:1 on 500 alone, so the words take the deep violet
     50 and the fills brighten 400 → 700 → 950 (5.0–14.5:1). */
  --funnel-1: var(--primary-400); --funnel-2: var(--primary-700); --funnel-3: var(--primary-800);
  --funnel-4: var(--primary-900); --funnel-5: var(--primary-950); --funnel-ink: var(--primary-50);
  --accent-50: 10 32 48; --accent-100: 14 44 64; --accent-200: 22 70 100;
  --accent-500: 56 189 248; --accent-600: 20 160 224; --accent-700: 125 211 252;

  --chart-1: 140 110 242; --chart-2: 56 189 248; --chart-3: 228 106 51; --chart-4: 244 114 182;
  --chart-5: 45 212 191; --chart-6: 250 191 80; --chart-7: 190 192 200; --chart-8: 52 56 78;
  --chart-grid: 52 51 58; --chart-axis: 169 168 176; --chart-cursor: 140 110 242;

  --sidebar-surface: 6 6 9; --sidebar-ink: 243 243 246; --sidebar-ink-2: 169 168 176;
  --sidebar-active-bg: 35 32 48; --sidebar-active-ink: 189 178 255; --sidebar-line: 29 28 33;

  --neutral-50: 24 25 40;  --neutral-100: 34 36 54;  --neutral-200: 48 52 74;
  --neutral-300: 70 74 102; --neutral-400: 104 110 138; --neutral-500: 140 146 172;
  --neutral-600: 176 182 204; --neutral-700: 202 207 224; --neutral-800: 224 227 240;
  --neutral-900: 240 241 250;

  --shadow-card: inset 0 1px 0 rgb(255 255 255 / .05), 0 10px 30px rgb(0 0 0 / .5);
  --shadow-pop:  0 24px 60px rgb(0 0 0 / .62);
  --shadow-brand: 0 6px 20px rgb(var(--primary-500) / .25), 0 0 26px rgb(var(--primary-500) / .3);
}

/* ════════════════════ SKIN: Candidate — emerald · airy · "opportunity" ════════════════════
   default light · --radius 20 · --density 1.15 · topbar nav (layout) ·
   signature: profile-completeness meter + application timeline. Forward-looking (Phase 4–5). */
[data-portal="candidate"] {
  --radius: 20px;
  --density: 1.15;

  /* emerald (primary-500 dark enough for white text → 4.8:1) */
  --primary-50: 236 251 243; --primary-100: 209 246 224; --primary-200: 167 233 196;
  --primary-300: 110 214 159; --primary-400: 34 163 74; --primary-500: 21 128 61;
  --primary-600: 22 101 52;   --primary-700: 21 83 45;  --primary-800: 19 69 39;
  --primary-900: 16 56 33;    --primary-950: 8 40 22;
  --primary-hover: var(--primary-600);
  --funnel-1: var(--primary-500); --funnel-2: var(--primary-600); --funnel-3: var(--primary-700);   /* white, 5.0–13.1:1 */
  --funnel-4: var(--primary-800); --funnel-5: var(--primary-900); --funnel-ink: var(--ink-inverse);
  /* teal accent */
  --accent-50: 224 246 244; --accent-100: 195 237 233; --accent-200: 140 219 210;
  --accent-500: 13 148 136; --accent-600: 15 118 110;  --accent-700: 17 94 89;

  /* subtle WARM surface tint + sidebar emerald rail + chart lead */
  --surface-0: 255 254 251; --surface-50: 247 245 240; --surface-100: 239 236 229;
  --surface-200: 227 223 214; --surface-300: 207 202 190;
  --line: 226 222 213; --line-strong: 206 201 189;
  --sidebar-surface: 8 30 22; --sidebar-ink: 233 244 238; --sidebar-ink-2: 130 162 144;
  --sidebar-active-bg: 14 50 34; --sidebar-active-ink: 134 239 172; --sidebar-line: 22 50 36;
  --chart-1: 21 128 61; --chart-2: 13 148 136; --chart-cursor: 21 128 61;
  --chart-3: 109 76 220; --ambient-2-o: .10; --ambient-3-o: .08;   /* the spine's were HR's until SUI4 */
}
[data-portal="candidate"].dark {
  --ink-inverse: 5 36 20;             /* bright emerald button needs dark-green text */
  --primary-50: 10 46 28; --primary-100: 14 60 36; --primary-200: 20 84 50;
  --primary-300: 28 120 72; --primary-400: 46 178 104; --primary-500: 34 197 94;
  --primary-600: 52 211 113; --primary-700: 134 239 172; --primary-800: 187 247 208;
  --primary-900: 220 252 231; --primary-950: 240 253 244;
  --primary-hover: var(--primary-600);     /* brighter: the button text is dark green */
  --funnel-1: var(--primary-400); --funnel-2: var(--primary-500); --funnel-3: var(--primary-600);   /* 6.1–13.7:1 */
  --funnel-4: var(--primary-700); --funnel-5: var(--primary-800); --funnel-ink: var(--ink-inverse);
  --accent-50: 8 44 40; --accent-100: 12 58 52; --accent-200: 18 84 76;
  --accent-500: 45 212 191; --accent-600: 20 184 166; --accent-700: 94 234 212;

  --surface-0: 24 22 18; --surface-50: 16 15 12; --surface-100: 33 30 25;
  --surface-200: 46 41 34; --surface-300: 63 57 48;
  --ink: 244 242 236; --ink-2: 196 192 184; --ink-3: 150 145 136; --ink-4: 104 99 91;
  --line: 44 40 34; --line-strong: 60 55 47;
  --sidebar-surface: 6 24 18; --sidebar-ink: 236 246 240; --sidebar-ink-2: 122 156 138;
  --sidebar-active-bg: 12 46 32; --sidebar-active-ink: 134 239 172; --sidebar-line: 16 44 32;
  --chart-1: 52 211 113; --chart-2: 45 212 191; --chart-cursor: 52 211 113;
  --chart-3: 167 139 250; --chart-grid: 36 39 80; --chart-axis: 150 155 190;   /* the .dark spine's until SUI4 */
}

/* ════════════════════ SKIN: Super-Admin — amber · compact · "control" ════════════════════
   default light (+dark) · --radius 12 · --density .9 · compact sidebar ·
   signature: persistent audit banner slot + danger-zone chrome.
   Amber takes near-black text (not white) → --ink-inverse overridden in BOTH themes. */
[data-portal="admin"] {
  --radius: 12px;
  --density: .9;
  --ink-inverse: 41 24 4;             /* dark text on amber button (6.5:1) */

  /* amber */
  --primary-50: 254 247 230; --primary-100: 253 236 197; --primary-200: 250 217 138;
  --primary-300: 246 188 73; --primary-400: 235 154 22; --primary-500: 217 119 6;
  --primary-600: 180 95 9;   --primary-700: 146 76 14;  --primary-800: 120 62 16;
  --primary-900: 100 53 17;  --primary-950: 60 31 9;
  --primary-hover: var(--primary-400);     /* brighter: amber takes near-black text */
  /* The funnel: near-black clears 4.5:1 on 500 and lighter only, so it deepens 100 → 500 (14.7–5.4:1). */
  --funnel-1: var(--primary-100); --funnel-2: var(--primary-200); --funnel-3: var(--primary-300);
  --funnel-4: var(--primary-400); --funnel-5: var(--primary-500); --funnel-ink: var(--ink-inverse);
  /* slate-blue accent */
  --accent-50: 235 240 248; --accent-100: 213 223 240; --accent-200: 170 188 220;
  --accent-500: 79 102 150; --accent-600: 60 82 126;   --accent-700: 46 64 102;

  /* subtle COOL-gray surface tint + slate sidebar w/ amber active + chart lead */
  --surface-0: 253 253 254; --surface-50: 242 244 247; --surface-100: 233 236 242;
  --surface-200: 221 225 233; --surface-300: 201 207 218;
  --line: 221 225 233; --line-strong: 200 206 217;
  --sidebar-surface: 23 26 33; --sidebar-ink: 233 236 242; --sidebar-ink-2: 140 148 164;
  --sidebar-active-bg: 48 38 16; --sidebar-active-ink: 250 204 110; --sidebar-line: 38 43 54;
  --chart-1: 217 119 6; --chart-2: 79 102 150; --chart-cursor: 217 119 6;
  --chart-3: 109 76 220; --ambient-2-o: .10; --ambient-3-o: .08;   /* the spine's were HR's until SUI4 */
}
[data-portal="admin"].dark {
  --ink-inverse: 41 24 4;             /* re-assert: .dark reset it to white */
  --primary-50: 42 29 7; --primary-100: 56 39 10; --primary-200: 84 58 16;
  --primary-300: 124 86 24; --primary-400: 180 128 38; --primary-500: 245 158 11;
  --primary-600: 251 191 36; --primary-700: 252 211 110; --primary-800: 253 230 170;
  --primary-900: 254 243 215; --primary-950: 255 250 240;
  --primary-hover: var(--primary-600);
  --funnel-1: var(--primary-400); --funnel-2: var(--primary-500); --funnel-3: var(--primary-600);   /* 4.9–13.9:1 */
  --funnel-4: var(--primary-700); --funnel-5: var(--primary-800); --funnel-ink: var(--ink-inverse);
  --accent-50: 18 28 44; --accent-100: 24 38 58; --accent-200: 36 56 86;
  --accent-500: 124 152 200; --accent-600: 100 130 184; --accent-700: 168 190 228;

  --surface-0: 18 21 27; --surface-50: 12 14 19; --surface-100: 26 30 38;
  --surface-200: 38 44 55; --surface-300: 54 62 76;
  --ink: 237 239 243; --ink-2: 192 197 207; --ink-3: 144 151 164; --ink-4: 100 107 120;
  --line: 38 44 55; --line-strong: 54 62 76;
  --sidebar-surface: 14 16 21; --sidebar-ink: 234 237 243; --sidebar-ink-2: 132 140 156;
  --sidebar-active-bg: 44 34 14; --sidebar-active-ink: 252 211 110; --sidebar-line: 30 35 44;
  --chart-1: 245 158 11; --chart-2: 124 152 200; --chart-cursor: 245 158 11;
  --chart-3: 167 139 250; --chart-grid: 36 39 80; --chart-axis: 150 155 190;   /* the .dark spine's until SUI4 */
}

/* ════════════════════ Front door / careers note ════════════════════
   The front door (S19d-2: login, sign-up and the token pages — design-system.md §3) takes
   the CHOSEN DOOR's palette: this spine for «شركة», [data-portal="candidate"] for «مرشّح»,
   read through registered --fd-* properties in apps/web's frontDoor.css. No new token.
   The boot retry screen (S19e-1b; it was AuthLayout's, now retired) wears the palette of
   the portal it stands in for: [data-portal="candidate"] on a candidate path, else this spine.
   The Phase-4 apps/site app overrode --brand per org (Organization.brandColor) on its
   PUBLIC careers pages only, independent of these three internal portal skins — until those pages were removed on
   2026-10-22. */