/* Career OS — generated from tokens.json */
:root, [data-theme="dark"] {
  --bg: #0d1b2a;
  --panel: #142235;
  --panel-2: #182c42;
  --border: #24374d;
  --text: #ffffff;
  --muted: #aab4c8;
  --orange: #ff5910;
  --accent: #2e86c1;
  --accent-2: #256fa0;
  --good: #34c98a;
  --good-bg: #11271f;
  --risk: #ff6b6b;
  --risk-bg: #2a1518;
  --rose: #ff85c0;
  --rose-bg: #2e1523;
  --rose-tint: rgba(255,133,192,.14);
  --warn: #ffb454;
  --warn-tint: rgba(255,180,84,.15);
  --good-tint: rgba(52,201,138,.16);
  --risk-tint: rgba(255,107,107,.14);
  --backdrop: rgba(0,0,0,.6);
  --surface-page: var(--bg);
  --surface-raised: var(--panel);
  --surface-sunken: var(--panel-2);
  --text-primary: var(--text);
  --text-secondary: var(--muted);
  --border-subtle: var(--border);
  --border-control: #64809f;
  --action-primary: var(--orange);
  --action-primary-hover: #ff7a3d;
  --on-action-primary: var(--bg);
  --link: var(--orange);
  --focus-ring: var(--orange);
  --status-error: var(--rose);
  --status-error-bg: var(--rose-bg);
  --status-warning: var(--warn);
  --status-warning-bg: var(--warn-tint);
  --status-ready: var(--good);
  --status-ready-bg: var(--good-bg);
  --status-complete: var(--muted);
  --shadow: 0 1px 3px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.18);
}
:root {
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --radius: 12px;
  --radius-control: 8px;
  --radius-chip: 7px;
  --radius-tooltip: 10px;
  --radius-pill: 20px;
  --view-max: 1080px;
  --breakpoint-md: 820px;
  --breakpoint-sm: 560px;
  --target-min: 24px;
  --target-comfort: 44px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
}
.page-title { font-family: var(--font-serif); font-size: 24px; line-height: 1.5; font-weight: 600; }
.verdict-headline { font-family: var(--font-serif); font-size: 23px; line-height: 1.35; font-weight: 600; }
.persp-headline { font-family: var(--font-serif); font-size: 18px; line-height: 1.35; font-weight: 600; }
.body { font-family: var(--font-sans); font-size: 15px; line-height: 1.5; font-weight: 400; }
.body-reading { font-family: var(--font-sans); font-size: 15px; line-height: 1.6; font-weight: 400; }
.control { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; font-weight: 500; }
.section-title { font-family: var(--font-sans); font-size: 15px; line-height: 1.4; font-weight: 600; }
.secondary { font-family: var(--font-sans); font-size: 13.5px; line-height: 1.5; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 13px; line-height: 1.5; font-weight: 500; }
.stat { font-family: var(--font-sans); font-size: 17px; line-height: 1.5; font-weight: 800; }
.eyebrow { font-family: var(--font-sans); font-size: 12.5px; line-height: 1.5; font-weight: 600; letter-spacing: 0px; }
.meta { font-family: var(--font-sans); font-size: 11.5px; line-height: 1.5; font-weight: 400; letter-spacing: 0.2px; }
.brand-mark { font-family: var(--font-sans); font-size: 13px; line-height: 1.5; font-weight: 800; letter-spacing: 1px; }