:root {
  /* Native controls / scrollbars / form widgets follow the theme. The dark
     override sets `color-scheme: dark` so they flip too. */
  color-scheme: light;

  --ff-display: 'Instrument Serif', Georgia, serif;
  --ff-body: 'Plus Jakarta Sans', system-ui, sans-serif;

  --primary: #4a9e8f;
  --primary-dark: #3b8275;
  /* Deep-teal, white-text-safe fill for primary button hovers, filled badges
     and CTA fills. Distinct from --primary-dark, which flips to a BRIGHT mint
     in dark mode (it is used as emphasis/hover TEXT color there) and would make
     white text illegible if used as a fill. --primary-strong stays dark in both
     themes so `color: white` on it always passes. */
  --primary-strong: #3b8275;
  --primary-light: #e4f2ef;
  --primary-lighter: #f2f9f7;

  --bg: #f7f6f3;
  --bg-alt: #eeedea;
  --bg-chat: #fbfaf8; /* warm near-white chat canvas, between --bg and --card */
  --card: #ffffff;
  --border: #e4e1db;
  --border-light: #eeedea;

  /* Sticky public-header surface (marketing PublicHeader + static blog) —
     translucent over backdrop-blur; flips to a dark translucent surface in the
     dark block so the header chrome stays legible. The landing keeps its own
     .landing-v2-scoped --nav-bg override, which wins within the landing subtree. */
  --nav-bg: rgba(247, 246, 243, 0.85);

  --text: #1a1a1a;
  --text-secondary: #555552;
  --text-muted: #8c8c88;
  --text-inverse: #ffffff;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-primary: 0 2px 6px rgba(45, 106, 94, 0.3);

  --primary-gradient: linear-gradient(135deg, #2D6A5E 0%, #4A9E8F 100%);

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* Semantic status colors */
  --danger: #cc4e62;
  --danger-light: #fde8ec;
  --warning: #b37328;
  --warning-light: #fef3e2;
  --success: #1d7a3f;
  --success-light: #e6f7ed;
  --info: #5a4dbf;
  --info-light: #eeecfb;

  /* Status badge/pill BORDERS — complete the status family (fg + -light bg +
     -border) so a tinted status pill's hairline flips in dark instead of baking
     a light-tint literal. Dark values become alpha tints of the hue (mirrors
     the -light background treatment). Used by onboarding scorecard pills, etc. */
  --success-border: #b7e0c4;
  --warning-border: #f0d6a3;
  --danger-border: #f3c1ca;
  /* Deep warning INK — a darker amber than --warning, kept because it must clear
     WCAG AA on --warning-light (--warning itself is ~3.6:1 there). Brightens in
     dark. Used by the onboarding résumé skip-warning banner. */
  --warning-strong: #7a5410;

  /* Backdrop overlay */
  --backdrop: rgba(0, 0, 0, 0.4);

  /* Same color as --bg but fully transparent — for scrim gradients that fade
     content to the page background (sticky-CTA fades). Fading opaque→`transparent`
     interpolates through a gray band; fading to the bg-at-0-alpha stays clean in
     both themes. */
  --bg-fade: rgba(247, 246, 243, 0);

  /* Score dimension colors */
  --c-substance: #4a9e8f;
  --c-structure: #d4864a;
  --c-relevance: #7668d6;
  --c-credibility: #cc4e62;
  --c-differentiation: #c99a2e;

  /* Primary with alpha */
  --primary-ghost: rgba(74, 158, 143, 0.04);
  --primary-ghost-md: rgba(74, 158, 143, 0.06);

  /* Job dot — Tesla-style nav notification indicator for async-jobs */
  --color-job-dot: #e6a817;

  /* ── Semantic surface & control patterns (dark-mode Phase 2a) ──
     Recurring "hardcoded light surface" patterns that used to bake a near-white
     literal (and so never flipped in dark). Each is a light+dark PAIR (dark
     values in the [data-theme="dark"] block below); consume the token, never the
     literal. These are generic UI vocabulary (kept in the foundation, not the
     interview-only layer) so any domain can reuse them. */

  /* Featured "start here" highlight card — a distinct elevated emphasis surface
     (Dashboard "START HERE" next-step). Dark = a subtly teal-tinted elevated
     patch on the card, not a glaring light slab. */
  --surface-featured: linear-gradient(135deg, #f7fbfa 0%, #ecf3f0 100%);

  /* Disabled / "coming soon" card surface (Mock setup's Coding / System Design
     rounds). A recessed, muted card that reads inactive. */
  --surface-disabled: #f2f1ec;

  /* Translucent placeholder / empty-state veil laid OVER content (Stories story-
     card auto-build overlay). Semi-opaque so the panel below shows through. */
  --surface-overlay: rgba(251, 250, 248, 0.9);

  /* Warning / "confirm" inline banner background (Mock "End without a score?").
     Border pairs with --warning; dark becomes an alpha tint of the warning hue. */
  --banner-warning-bg: #fdf8ef;

  /* Selected segment / active chip in segmented controls & toggles (Quick/Full/
     Deep, "Practice Single", stat pills). Aliases the primary tint so it themes
     with --primary-light / --primary-dark automatically (no separate dark value
     needed — the referenced tokens carry their own). */
  --segment-active-bg: var(--primary-light);
  --segment-active-fg: var(--primary-dark);

  /* Body copy on an elevated card. Maps to --text-secondary, which clears WCAG
     AA on --card in both themes (dark #a7b1ac on #18211e ≈ 7:1) — use it for
     card body text instead of the borderline --text-muted (Cover Letter body). */
  --text-body: var(--text-secondary);

  /* Transition speeds */
  --speed-fast: 0.12s;
  --speed-normal: 0.2s;

  /* Layout */
  --topbar-h: 64px;
  --sidebar-w: 230px;
  --sidebar-collapsed-w: 56px;

  /* Radius extension */
  --radius-pill: 999px;

  /* Font extension */
  --ff-mono: monospace;

  /* Type scale — committed font-size steps. Replaces ad-hoc fractional (.5px)
     sizes with the nearest integer step so text sizing is consistent and
     tokenized. Values are in px to match the existing rem-free sizing. */
  --fs-2xs: 10px;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 20px;
  --fs-3xl: 24px;
  --fs-4xl: 28px;
  --fs-page: 32px;

  /* Alias tokens — resolve variables used in CSS but previously undeclared.
     These aliases ensure var() references silently resolve to their intended
     token rather than falling back to the browser's initial/inherited value. */
  --mk-mono: var(--ff-mono);    /* mock timer and date display */
  --bg-card: var(--card);       /* card background alias */
  --bg-muted: var(--bg-alt);    /* muted background alias */
  --surface: var(--card);       /* surface alias */
  --text-primary: var(--text);  /* primary text alias */

  /* Interview-app product tokens (résumé-score, severity/priority/kanban/
     rating badges, auth modal) live in ./interview-tokens.css — imported only
     by the interview app so other domains inherit just this foundation. */
}

/* ────────────────────────────────────────────────────────────────────────
   Dark theme — token overrides, applied when <html data-theme="dark"> is set
   (by the pre-hydration FOUC script + ThemeProvider). Grounded in PR #378's
   captain-approved "2b night" landing skin (pages/landing/skin.css), extended
   to the tokens the landing does not use.

   This block is INERT without the attribute, so token consumers that never set
   it (e.g. apps/business, the blog before its head script runs) are unaffected
   until they opt in. Only tokens that CHANGE are listed; everything else
   inherits the light :root above.

   Rules applied uniformly: brand teal fills (--primary) stay put with white
   text; status/chart FOREGROUNDS brighten one step so they clear WCAG AA on the
   dark card; pastel "-light" BACKGROUNDS become low-alpha tints of their hue;
   shadows deepen so cards still separate from the page.
   ──────────────────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  color-scheme: dark;

  --primary-dark: #7fd8c5;               /* emphasis / hover TEXT — brightens */
  --primary-light: rgba(74, 158, 143, .18);
  --primary-lighter: rgba(74, 158, 143, .12);

  --bg: #0e1512;
  --bg-alt: #141d1a;
  --bg-chat: #131b18;
  --card: #18211e;
  --border: #2a3531;
  --border-light: #212b28;
  --nav-bg: rgba(14, 21, 18, 0.85);

  --text: #eef1ee;
  --text-secondary: #a7b1ac;
  /* Nudged +1 brightness step from the 2b night skin's #7c857f so muted text
     clears WCAG AA (4.5:1) on --card — #7c857f was 4.33:1, a §7.5 thin spot.
     Visually near-identical; kept in sync with the landing skin.css night block. */
  --text-muted: #838c86;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3);

  --backdrop: rgba(0, 0, 0, 0.6);

  /* Score dimension colors — brightened ~15-20% to clear AA on --card. */
  --c-substance: #6fc7b4;
  --c-structure: #e3a06b;
  --c-relevance: #9d92e6;
  --c-credibility: #e0768a;
  --c-differentiation: #dcb655;

  /* Semantic status — foreground brightens, "-light" background becomes an
     alpha tint of the same hue on the dark card. */
  --danger: #e0768a;
  --danger-light: rgba(204, 78, 98, .16);
  --warning: #d99a4e;
  --warning-light: rgba(179, 115, 40, .16);
  --success: #4cbf74;
  --success-light: rgba(29, 122, 63, .16);
  --info: #9187e0;
  --info-light: rgba(90, 77, 191, .18);

  /* Status borders — alpha tints of each hue (mirrors --rs-*-border, ~.30). */
  --success-border: rgba(29, 122, 63, .30);
  --warning-border: rgba(179, 115, 40, .30);
  --danger-border: rgba(204, 78, 98, .30);
  /* Deep warning ink brightens to clear AA on the dark --warning-light tint. */
  --warning-strong: #e6b168;

  /* Transparent page bg for scrim fades (see light value). */
  --bg-fade: rgba(14, 21, 18, 0);

  /* Semantic surface & control patterns (see light :root above). The alias
     tokens (--segment-active-*, --text-body) inherit their dark values from the
     tokens they reference, so only the standalone surfaces are re-declared. */

  /* Teal-tinted elevated highlight over --card (#18211e) — reads as an
     intentional "glow" emphasis, never a light slab. Border stays --primary-light. */
  --surface-featured: linear-gradient(135deg, rgba(74, 158, 143, .18) 0%, rgba(74, 158, 143, .08) 100%);

  /* Recessed muted card — a touch darker than --card so a disabled round reads
     inactive against the surrounding cards. */
  --surface-disabled: #141d1a;

  /* Dark translucent veil — matches the dark chat canvas so the overlay reads as
     the same material as the panel it covers. */
  --surface-overlay: rgba(19, 27, 24, 0.9);

  /* Warning banner — alpha tint of the warning hue on the dark card (mirrors
     --warning-light's dark treatment). */
  --banner-warning-bg: rgba(179, 115, 40, .14);
}

/* ── Instant tooltip (use data-tip="…" on any element) ──
   Uses ::before rather than ::after because ::after is commonly used for
   decoration (stepper lines, divider rules, etc.) — sharing a pseudo-element
   would cause the tooltip's opacity:0 to bleed into those decorations. */
[data-tip] {
  position: relative;
  cursor: default;
}
[data-tip]::before {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  background: var(--text);
  color: var(--bg);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s;
  z-index: 100;
}
[data-tip]:hover::before {
  opacity: 1;
}

/* Base reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  font-family: var(--ff-body);
  color: var(--text);
  background: var(--bg);
  height: 100%;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

#root {
  height: 100%;
}

/* Responsive breakpoints */
@media (max-width: 1024px) {
  :root {
    --sidebar-w: var(--sidebar-collapsed-w);
  }
}

@media (max-width: 768px) {
  :root {
    --sidebar-w: 0px;
    --topbar-h: 50px;
  }
}