/* ═══════════════════════════════════════════════════════════
   TECHTRUTH.AI — Design Tokens
   Edit this file to update the entire design system.
   ═══════════════════════════════════════════════════════════

   Typography
   ──────────
   Display : 'Clash Display'  — headings, hero, numbers
   Body    : 'IBM Plex Mono'  — all other text

   Color roles
   ───────────
   --accent   : primary interactive / highlight
   --green    : positive / confirmed / pass
   --amber    : warning / pending / in-development
   --red      : risk / gap / fail
   --surface  : card background
   --surface2 : inset / row background
   --border   : subtle divider
   --border2  : emphasized divider / hover
   --text     : primary copy
   --text2    : secondary copy
   --text3    : muted / label / placeholder
   ═══════════════════════════════════════════════════════════ */

/* ─── DARK THEME (default) ──────────────────────────────── */
[data-theme="dark"] {
  --bg:          #080c10;
  --bg2:         #0d1117;
  --surface:     #111820;
  --surface2:    #161e28;
  --border:      rgba(0, 200, 255, 0.08);
  --border2:     rgba(0, 200, 255, 0.18);
  --text:        #e8f0f8;
  --text2:       #7a9ab5;
  --text3:       #3d5a72;
  --accent:      #00c8ff;
  --accent2:     #0066cc;
  --green:       #00e5a0;
  --amber:       #f0a500;
  --red:         #ff4757;
  --glow:        rgba(0, 200, 255, 0.10);
  --glow-str:    rgba(0, 200, 255, 0.25);
  --logo-filter: none;
  --scan-line:   rgba(0, 200, 255, 0.03);
}

/* ─── LIGHT THEME ────────────────────────────────────────── */
[data-theme="light"] {
  --bg:          #f5f7fa;
  --bg2:         #eaeff5;
  --surface:     #ffffff;
  --surface2:    #f0f4f8;
  --border:      rgba(10, 40, 90, 0.10);
  --border2:     rgba(10, 40, 90, 0.22);
  --text:        #0a1628;
  --text2:       #2a4060;
  --text3:       #5a7090;
  --accent:      #005bb5;
  --accent2:     #003f80;
  --green:       #007a50;
  --amber:       #b06000;
  --red:         #c0202e;
  --glow:        rgba(0, 90, 180, 0.07);
  --glow-str:    rgba(0, 90, 180, 0.15);
  --logo-filter: invert(1) brightness(0.2) sepia(1) hue-rotate(190deg);
  --scan-line:   rgba(0, 60, 160, 0.018);
}

/* ─── GLOBAL SCALE ───────────────────────────────────────── */
:root {
  --nav-height: 88px;
  --max-width:  1280px;
  --page-px:    48px;
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  8px;
}

/* ─── LIGHT MODE READABILITY OVERRIDES ───────────────────── */
/* Force better contrast for small/muted text elements in light mode */
[data-theme="light"] .stat-lbl,
[data-theme="light"] .stat-sub,
[data-theme="light"] .f-num,
[data-theme="light"] .g-label,
[data-theme="light"] .page-tag,
[data-theme="light"] .hero-tag,
[data-theme="light"] .report-meta,
[data-theme="light"] .finding-type,
[data-theme="light"] .field-label,
[data-theme="light"] .pb-label,
[data-theme="light"] .dz-accept,
[data-theme="light"] .dz-sub,
[data-theme="light"] .vc-tag,
[data-theme="light"] .vc-slot-label,
[data-theme="light"] .vc-commit-title,
[data-theme="light"] .coming-tag,
[data-theme="light"] .login-footer,
[data-theme="light"] .disclaimer-txt,
[data-theme="light"] .wccaa-table th,
[data-theme="light"] .reality-table th,
[data-theme="light"] .wccaa-table .wt {
  color: #3a5070;
  opacity: 1;
}

/* Stat sub-labels especially need more weight in light */
[data-theme="light"] .stat-sub {
  color: #4a6880;
  opacity: 1;
  font-size: 10px;
}

[data-theme="light"] .stat-lbl {
  color: #2a4060;
  font-weight: 500;
}

/* Card body text in light - darker */
[data-theme="light"] .f-desc,
[data-theme="light"] .ghost-desc,
[data-theme="light"] .vc-desc,
[data-theme="light"] .exec-text,
[data-theme="light"] .finding-body,
[data-theme="light"] .pb-step,
[data-theme="light"] .sec-name,
[data-theme="light"] .page-sub,
[data-theme="light"] .hero-sub {
  color: #2a4060;
}

/* Labels inside cards */
[data-theme="light"] .g-label {
  color: #3a5070;
  letter-spacing: 0.18em;
}

/* Table cells */
[data-theme="light"] .wccaa-table td,
[data-theme="light"] .reality-table td {
  color: #1e3450;
}

/* Scale labels */
[data-theme="light"] .scale-header {
  color: #2a4060;
}

/* Form placeholder */
[data-theme="light"] .field-input::placeholder,
[data-theme="light"] .ghost-input::placeholder {
  color: #7a95b0;
}