/* ═════════════════════════════════════════════════════════════════════════
   tevos-system.css — Tevos v2 design system (tokens + reusable primitives)
   2026-04-25 — extracted from candidate/partials/_tab_overview_tevos.php

   Phase 1 of the site-wide redesign: every page that adopts the Tevos look
   wraps its content in `.tvx2` (and optionally `.tvx2.has-subnav` when the
   dash-subnav strip is present). Tokens are scoped under `.tvx2` so this
   file can co-exist with legacy stylesheets without bleeding into them.

   Composition layers (cascade order):
     1. Tokens          — design tokens (colors, type, line widths)
     2. Base            — page wrapper, box-sizing, type defaults
     3. Primitives      — mono/eyebrow/dot/chip/temp utilities
     4. Components      — reusable widgets (cards, buttons, hero, header)
     5. Responsive      — breakpoints for the wrapper

   Dashboard-specific composites (top-match ring, career aperture, pivot
   grid, signal feed, best-moves) live in tevos-dashboard.css.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ──────────────────────────────────────────────────────────── */

.tvx2 {
  /* Dark (default) — pure black surfaces, near-white type */
  --tvx2-bg:        #000000;
  --tvx2-elev:      #0A0B0E;
  --tvx2-soft:      #0F1115;
  --tvx2-fg:        #FFFFFF;
  --tvx2-fg-2:      rgba(255,255,255,.78);
  --tvx2-muted:     rgba(255,255,255,.46);
  --tvx2-line:      rgba(255,255,255,.08);
  --tvx2-line-2:    rgba(255,255,255,.14);
  --tvx2-accent:    #2DD17B;
  --tvx2-accent-2:  #20B86A;
  --tvx2-accent-soft: rgba(45,209,123,.12);
  --tvx2-pink:      #FF2EA6;
  --tvx2-amber:     #F59E0B;
  --tvx2-blue:      #5EB0FF;
  --tvx2-violet:    #B084FF;
  --tvx2-rose:      #FF6B7A;

  --tvx2-warm-bg:   rgba(245,158,11,.10);
  --tvx2-warm-fg:   #F59E0B;
  --tvx2-warm-bd:   rgba(245,158,11,.30);
  --tvx2-cool-bg:   rgba(94,176,255,.10);
  --tvx2-cool-fg:   #5EB0FF;
  --tvx2-cool-bd:   rgba(94,176,255,.30);

  --tvx2-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --tvx2-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;

  /* Page chrome — total height of fixed top stuff (top-bar, subnav, etc.).
     Default is just the top-bar; .has-subnav adds the 38px dash-subnav. */
  --tvx2-chrome: var(--ic-height, 48px);
}
.tvx2.has-subnav {
  --tvx2-chrome: calc(var(--ic-height, 48px) + 38px);
}
.tvx2.has-subnav.has-welcome-banner {
  /* Welcome banner sits between top-bar and page content (~98px tall). */
  --tvx2-chrome: calc(var(--ic-height, 48px) + 38px + 98px);
}

/* ── 1b. Legacy-token bridge ────────────────────────────────────────────────
   When a page wraps its content in .tvx2, every legacy CSS variable
   referenced by inherited stylesheets (tevos.css, base.css, candidate-styles
   .css, dashboard.css, etc.) inside this scope resolves to the Tevos v2
   value. This is what lets us migrate the whole site by adding one class
   per page rather than rewriting every component's CSS. */
.tvx2 {
  /* Backgrounds */
  --bg:           var(--tvx2-bg);
  --bg-base:      var(--tvx2-bg);
  --bg-surface:   var(--tvx2-elev);
  --bg-card:      var(--tvx2-elev);
  --bg-elev:      var(--tvx2-elev);
  --bg-soft:      var(--tvx2-soft);
  --bg-soft-2:    var(--tvx2-soft);
  --bg-raised:    var(--tvx2-soft);
  --bg-hover:     var(--tvx2-soft);
  --bg-input:     var(--tvx2-elev);
  --bg-modal:     var(--tvx2-elev);
  --bg-popover:   var(--tvx2-elev);
  --bg-glass:     var(--tvx2-elev);
  --bg-overlay:   rgba(0,0,0,.55);

  /* Text */
  --t-primary:    var(--tvx2-fg);
  --t-secondary:  var(--tvx2-fg-2);
  --t-muted:      var(--tvx2-muted);
  --t-quaternary: var(--tvx2-muted);
  --t-on-accent:  #07080A;
  --t-inverse:    var(--tvx2-bg);

  /* Borders / lines */
  --line:         var(--tvx2-line);
  --line-mid:     var(--tvx2-line-2);
  --line-strong:  var(--tvx2-line-2);
  --border-1:     var(--tvx2-line);
  --border-2:     var(--tvx2-line-2);
  --border-strong:var(--tvx2-line-2);
  --border-accent:var(--tvx2-accent);
  --glass-border: var(--tvx2-line-2);

  /* Brand / accent */
  --accent:        var(--tvx2-accent);
  --accent-hover:  var(--tvx2-accent-2);
  --accent-soft:   var(--tvx2-accent-soft);
  --accent-border: var(--tvx2-accent);
  --accent-glow:   0 0 16px color-mix(in srgb, var(--tvx2-accent) 60%, transparent);
  --brand:         var(--tvx2-accent);
  --brand-soft:    var(--tvx2-accent-soft);
  --brand-strong:  var(--tvx2-accent-2);
  --brand-glow:    0 0 16px color-mix(in srgb, var(--tvx2-accent) 60%, transparent);
  --hl-cyan:       var(--tvx2-accent);
  --hl-cyan-soft:  var(--tvx2-accent-soft);
  --hl-pink:       var(--tvx2-pink);
  --hl-pink-soft:  rgba(255,46,166,.10);
  --trust:         var(--tvx2-accent);
  --trust-soft:    var(--tvx2-accent-soft);
  --trust-deep:    var(--tvx2-accent-2);
  --trust-glow:    0 0 16px color-mix(in srgb, var(--tvx2-accent) 60%, transparent);
  --trust-border:  var(--tvx2-accent);

  /* Status */
  --warn:        var(--tvx2-amber);
  --warn-soft:   var(--tvx2-warm-bg);
  --danger:      var(--tvx2-rose);
  --info:        var(--tvx2-blue);
  --success:     var(--tvx2-accent);

  /* Type families */
  --ff-body:     var(--tvx2-sans);
  --ff-display:  var(--tvx2-sans);
  --ff-data:     var(--tvx2-mono);
}

html[data-theme="light"] .tvx2 {
  --tvx2-bg:        #FFFFFF;
  --tvx2-elev:      #FFFFFF;
  --tvx2-soft:      #F7F7F4;
  --tvx2-fg:        #07080A;
  --tvx2-fg-2:      rgba(7,8,10,.78);
  --tvx2-muted:     rgba(7,8,10,.50);
  --tvx2-line:      rgba(7,8,10,.08);
  --tvx2-line-2:    rgba(7,8,10,.14);
  --tvx2-accent:    #15B765;
  --tvx2-accent-2:  #0E9A52;
  --tvx2-accent-soft: rgba(21,183,101,.10);
  --tvx2-pink:      #E91E81;
  --tvx2-warm-bg:   rgba(245,158,11,.14);
  --tvx2-warm-bd:   rgba(245,158,11,.40);
  --tvx2-cool-bg:   rgba(11,107,191,.10);
  --tvx2-cool-fg:   #0B6BBF;
  --tvx2-cool-bd:   rgba(11,107,191,.30);
}

/* ── 2. Base / page wrapper ─────────────────────────────────────────────── */

.tvx2 {
  background: var(--tvx2-bg);
  color: var(--tvx2-fg);
  font-family: var(--tvx2-sans);
  min-height: 100vh;
  /* [FIXED P0] clamp horizontal padding: 16px on 320px → 56px on desktop */
  padding: calc(var(--tvx2-chrome) + 36px) 24px 200px;
  padding: calc(var(--tvx2-chrome) + 36px) clamp(16px, 3.5vw, 56px) 200px;
  max-width: 1480px;
  margin: 0 auto;
}
.tvx2 *,
.tvx2 *::before,
.tvx2 *::after { box-sizing: border-box; }

/* ── 3. Primitives ──────────────────────────────────────────────────────── */

.tvx2-mono   { font-family: var(--tvx2-mono); }

.tvx2-eyebrow {
  font-family: var(--tvx2-mono);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--tvx2-muted);
  display: inline-flex; align-items: center; gap: 8px;
}
.tvx2-eyebrow--accent { color: var(--tvx2-accent); }
.tvx2-eyebrow--small  { font-size: 9.5px; letter-spacing: .16em; }

.tvx2-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--tvx2-accent);
  box-shadow: 0 0 0 0 rgba(45,209,123,.6);
  animation: tvx2-pulse 2.4s ease-in-out infinite;
}
@keyframes tvx2-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(45,209,123,.55); }
  50%     { box-shadow: 0 0 0 6px rgba(45,209,123,0);  }
}

.tvx2-chip {
  display: inline-flex; padding: 5px 10px;
  border: 1px solid var(--tvx2-line-2); border-radius: 999px;
  font-size: 11.5px; color: var(--tvx2-fg-2);
  background: transparent;
}
.tvx2-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }

.tvx2-temp {
  font-family: var(--tvx2-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .14em; padding: 4px 9px; border-radius: 6px;
  text-transform: uppercase;
}
.tvx2-temp--hot  { background: rgba(255,46,166,.10); color: var(--tvx2-pink); box-shadow: inset 0 0 0 0.5px rgba(255,46,166,.35); }
.tvx2-temp--warm { background: var(--tvx2-warm-bg); color: var(--tvx2-warm-fg); box-shadow: inset 0 0 0 0.5px var(--tvx2-warm-bd); }
.tvx2-temp--cool { background: var(--tvx2-cool-bg); color: var(--tvx2-cool-fg); box-shadow: inset 0 0 0 0.5px var(--tvx2-cool-bd); }

/* ── 4. Components ──────────────────────────────────────────────────────── */

/* Header strip (TEVOS · breadcrumb · avatar). Pages may opt in or out. */
.tvx2-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 36px;
}
.tvx2-mark {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--tvx2-mono);
  font-size: 16px; font-weight: 700; letter-spacing: .18em;
  color: var(--tvx2-fg);
}
.tvx2-mark::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--tvx2-accent);
}
.tvx2-breadcrumb {
  margin-left: 22px; padding-left: 22px;
  border-left: 1px solid var(--tvx2-line-2);
  font-family: var(--tvx2-mono);
  font-size: 11px; font-weight: 600; letter-spacing: .18em;
  color: var(--tvx2-muted); text-transform: uppercase;
}
.tvx2-breadcrumb b { color: var(--tvx2-fg); font-weight: 600; }
.tvx2-header-right { display: flex; align-items: center; gap: 16px; }
.tvx2-notif {
  position: relative; width: 34px; height: 34px;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--tvx2-accent-soft);
  color: var(--tvx2-accent); font-family: var(--tvx2-mono); font-weight: 700;
  font-size: 12px;
}
.tvx2-avatar-card {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 12px 4px 4px;
  border: 1px solid var(--tvx2-line-2); border-radius: 999px;
  background: var(--tvx2-elev);
}
.tvx2-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--tvx2-pink); color: #fff;
  display: grid; place-items: center;
  font-family: var(--tvx2-mono); font-weight: 700; font-size: 10.5px; letter-spacing: .04em;
}
.tvx2-avatar-meta { display: flex; flex-direction: column; gap: 0; line-height: 1.15; }
.tvx2-avatar-name { font-size: 12px; font-weight: 600; color: var(--tvx2-fg); }
.tvx2-avatar-role {
  font-family: var(--tvx2-mono); font-size: 9px; font-weight: 600;
  letter-spacing: .14em; color: var(--tvx2-muted);
}

/* Hero (oversized greeting/title + CTA cluster) */
.tvx2-hero {
  display: flex; gap: 40px; align-items: flex-end; justify-content: space-between;
  padding-bottom: 40px;
}
.tvx2-hero-greet {
  font-size: 32px;
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 700; line-height: 1.12; letter-spacing: -0.02em;
  color: var(--tvx2-fg);
  margin-bottom: 14px;
}
.tvx2-hero-name { color: var(--tvx2-accent); }
.tvx2-hero-headline {
  margin: 0;
  font-size: 22px;
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 600; line-height: 1.18; letter-spacing: -0.015em;
  color: var(--tvx2-fg-2);
  max-width: none;
}
.tvx2-hero-actions { display: flex; gap: 12px; flex-shrink: 0; }

/* Buttons (primary + ghost) */
.tvx2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 13px 22px; border-radius: 12px;
  font-family: var(--tvx2-sans); font-weight: 600; font-size: 13.5px;
  cursor: pointer; text-decoration: none; border: 1px solid transparent;
  transition: transform .12s ease, background .15s, border-color .15s;
  white-space: nowrap;
}
.tvx2-btn--primary {
  background: var(--tvx2-accent); color: #07080A;
}
.tvx2-btn--primary:hover { background: var(--tvx2-accent-2); transform: translateY(-1px); }
.tvx2-btn--ghost {
  background: transparent; color: var(--tvx2-fg);
  border-color: var(--tvx2-line-2);
}
.tvx2-btn--ghost:hover { border-color: var(--tvx2-fg-2); }

/* Card primitive (used by every composite section) */
.tvx2-card {
  background: var(--tvx2-elev);
  border: 1px solid var(--tvx2-line);
  border-radius: 18px;
  overflow: hidden;
}
.tvx2-card-head {
  padding: 18px 22px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.tvx2-card-head + .tvx2-card-body { padding-top: 0; }
.tvx2-card-body { padding: 22px; }
.tvx2-card-divider { border-top: 1px solid var(--tvx2-line); }

/* ── 5. Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
  .tvx2 { padding: calc(var(--tvx2-chrome) + 28px) 28px 200px; }
}
@media (max-width: 820px) {
  .tvx2 { padding: calc(var(--tvx2-chrome) + 20px) 18px 180px; }
  .tvx2-header { flex-wrap: wrap; gap: 12px; }
  .tvx2-hero { flex-direction: column; align-items: flex-start; }
  .tvx2-hero-greet { font-size: 28px; }
}