/* ==========================================================================
   LeadSurface — APEX design tokens (single source of truth)
   Light, technical, minimal (the mockup-a-apex-light pattern). Teal primary (Signal Teal #0f766e);
   cyan reserved for dark-anchor sections / live indicators only.
   Bricolage Grotesque (display) · IBM Plex Sans (body) · IBM Plex Mono (code).

   App SPA + marketing pages consume the LIGHT palette below.
   Admin dashboards re-declare the surface vars dark in admin.css.
   ========================================================================== */
:root {
  /* --- Surfaces (light) --- */
  --bg: #f8fafc; /* page / app background */
  --panel: #ffffff; /* card surface */
  --panel-2: #f1f5f9; /* inputs / subtle fills */
  --panel-3: #e2e8f0; /* hover / track */

  /* --- Borders --- */
  --border: rgba(15, 23, 42, 0.09);
  --border-strong: rgba(15, 23, 42, 0.16);
  --border-accent: rgba(15, 118, 110, 0.25);

  /* --- Text (on light) --- */
  --text: #334155; /* primary body text */
  --text-hi: #0f172a; /* headings / emphasis */
  --muted: #64748b; /* secondary text */
  --text-3: #5f6b7a; /* tertiary / captions */
  --text-4: #cbd5e1; /* dim / disabled */

  /* --- Brand --- */
  --accent: #0f766e;
  --accent-2: #0a5c54;
  --accent-soft: rgba(15, 118, 110, 0.1);
  --cyan: #00d4ff; /* dark-anchor / live indicators only */
  --green: #10b981;
  --amber: #f59e0b;
  --red: #ef4444;

  /* --- Signal semantics (intent rails) ---
     switching = highest intent (red), praise = lowest (green). */
  --switching: #ef4444;
  --comparison: #f59e0b;
  --complaint: #eab308;
  --praise: #10b981;

  /* --- Dark-anchor palette ---
     For the intentionally dark sections that contrast with the light page:
     the hero terminal, the classification panel, the CTA, and the footer. */
  --d-bg: #0f172a; /* deep navy anchor background */
  --d-bg-2: #0f1117; /* terminal / panel surface */
  --d-surf: #191c2a; /* signal rows */
  --d-surf-2: #1e2133; /* elevated dark fill */
  --d-border: rgba(255, 255, 255, 0.08);
  --d-border-accent: rgba(15, 118, 110, 0.28);
  --d-text: #f0f4ff;
  --d-muted: #94a3b8;
  --d-3: #64748b;
  --d-4: #4b5563;

  /* --- Typography ---
     Roster-matched, deliberately off the AI-default sans monoculture:
     Bricolage Grotesque (distinctive display) · IBM Plex Sans (technical body)
     · IBM Plex Mono (labels / code, proper label role only). */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  /* --- Radius --- */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;

  /* --- Elevation --- */
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 6px 20px rgba(15, 23, 42, 0.06);
  --shadow-accent: 0 4px 20px rgba(15, 118, 110, 0.18);

  /* --- Layout --- */
  --maxw: 1180px;
}

/* Respect reduced-motion globally. Lives here (every page loads tokens.css) so
   it covers marketing, the app shell, login, and admin alike. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}