/* ============================================================
 * APEX CLIENT CRM (James Demo) · DESIGN TOKENS · CANONICAL
 *
 * Single source of truth for every color, font, radius, shadow,
 * and animation-timing constant across all 48 client screens.
 * Mirrors the locked Apex Sales OS token set
 * (donor: design-mockups/01-pitch-tool.html, shared/styles/00-tokens.css
 *  in the canonical apex-client-portal foundation).
 *
 * BRAND LAWS BAKED IN (do not break):
 *   - Cool-spectrum / purple only. Primary #635bff.
 *   - Done / success states = indigo #4f46e5 (NEVER traffic-light green).
 *   - Stuck / error / off states = gunmetal #1a1f36 (NEVER red).
 *   - There is NO red token anywhere in this file by design.
 *   - Inter Tight body, JetBrains Mono numerics.
 *
 * Theme is set via html[data-theme="light|dark"] (default: light,
 * per client-portal hard rule 8). Dark surfaces are reserved for the
 * video stage. NEVER hardcode a color elsewhere, always use a var.
 *
 * Owner: Terminal 0 (shared-foundation / 00-tokens). READ-ONLY to
 * every other terminal. Do not modify outside this file.
 * ============================================================ */

:root{
  /* ---- Surfaces (light, default) ---- */
  --bg:#ffffff; --bg-soft:#fafbfc; --bg-tint:#f7f8fa; --bg-warm:#fdfcfb;
  --surface:#ffffff; --hover:#f6f7f9; --border:#e6e8ec; --border-strong:#d6d9df;
  --border-focus:#635bff;

  /* ---- Text ---- */
  --text:#1a1f36; --text-soft:#3c4257; --text-muted:#697386; --text-faint:#8792a2;

  /* ---- Primary (purple) ---- */
  --primary:#635bff; --primary-hover:#5851e6; --primary-soft:#f5f4ff;

  /* ---- Chrome ---- */
  --topbar-bg:rgba(255,255,255,.85);
  --modal-scrim:rgba(26,31,54,.45);
  --drawer-scrim:rgba(26,31,54,.32);

  /* ---- Semantic (NO red, NO traffic-light green) ----
   * success = indigo, warning = neutral grey, "danger" = gunmetal stuck. */
  --success:#4f46e5; --success-bg:#eeecff;
  --warning:#6b7280; --warning-bg:#f4f5f7;
  --danger:#1a1f36; --danger-bg:#ecedf0;
  --info:#635bff; --info-bg:#f5f4ff;

  /* ---- Status chips ---- */
  --status-done:#4f46e5; --status-done-bg:#eeecff; --status-done-fg:#3b34a8; --status-done-bd:#d6d2ff;
  --status-working:#635bff; --status-working-bg:#f5f4ff; --status-working-fg:#4f46e5; --status-working-bd:#e0deff;
  --status-stuck:#1a1f36; --status-stuck-bg:#ecedf0; --status-stuck-fg:#1a1f36; --status-stuck-bd:#d6d9df;
  --status-notstarted:#8792a2; --status-notstarted-bg:#f4f5f7; --status-notstarted-fg:#54607a; --status-notstarted-bd:#e6e8ec;

  /* ---- Pulse / urgency (purple-only, never red) ---- */
  --pulse-critical:#4f46e5; --pulse-critical-bg:#eeecff; --pulse-critical-fg:#3b34a8; --pulse-critical-bd:#d6d2ff; --pulse-critical-dot:#4f46e5;
  --pulse-high:#7a73ff; --pulse-high-bg:#f5f4ff; --pulse-high-fg:#4f46e5; --pulse-high-bd:#e0deff; --pulse-high-dot:#7a73ff;
  --pulse-live:#635bff;          /* live recording / on-air purple pulse */

  /* ---- Brand gradient ---- */
  --grad: linear-gradient(135deg,#7a73ff 0%, #635bff 35%, #4f46e5 65%, #2563eb 100%);

  /* ---- Apex orb gradient stops (real app-icon orb, never a CSS "A") ---- */
  --orb-1:#8c86ff; --orb-2:#7a73ff; --orb-3:#635bff; --orb-4:#4f46e5; --orb-5:#2563eb;
  --orb-glow:rgba(99,91,255,.42);

  /* ---- Sparkline / chart gradient stops ---- */
  --spark:#635bff; --spark-soft:#7a73ff;
  --spark-area-top:rgba(99,91,255,.22); --spark-area-bottom:rgba(99,91,255,0);

  /* ---- War-room / cockpit accents ---- */
  --hero-ink:#1a1f36; --hero-accent:#635bff; --kpi-trend-up:#4f46e5; --kpi-trend-flat:#697386;

  /* ---- Fonts ---- */
  --font-sans:'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Shadows ---- */
  --shadow-xs:0 1px 2px rgba(16,24,40,.04);
  --shadow-sm:0 2px 5px -1px rgba(50,50,93,.08), 0 1px 3px -1px rgba(0,0,0,.05);
  --shadow-md:0 8px 22px -8px rgba(50,50,93,.12), 0 4px 10px -4px rgba(0,0,0,.05);
  --shadow-lg:0 24px 48px -12px rgba(50,50,93,.18), 0 8px 18px -8px rgba(0,0,0,.06);

  /* ---- Radii ---- */
  --radius-sm:6px; --radius:8px; --radius-lg:12px; --radius-xl:16px;

  /* ---- Motion timing (named so 04-transitions + components share them) ---- */
  --t:160ms cubic-bezier(.2,.6,.3,1);             /* default micro-transition */
  --ease:cubic-bezier(.2,.6,.3,1);
  --dur-hold:1500ms;                               /* hold-to-confirm conic arc */
  --dur-route-fade:200ms;                          /* SPA route fade */
  --dur-celebration:400ms;                         /* F10 heavy completion fade */
  --dur-orb-pulse:2400ms;                          /* idle orb ring/bar pulse */
  --dur-rec-pulse:1600ms;                          /* live recording purple pulse */
}

/* ============================================================
 * DARK THEME — reserved for the video stage (call/waiting room).
 * Light is the client-portal default; this only applies under
 * html[data-theme="dark"].
 * ============================================================ */
html[data-theme="dark"]{
  --bg:#0a0e1a; --bg-soft:#0e1320; --bg-tint:#131826; --bg-warm:#0a0e1a;
  --surface:#131826; --hover:#1a1f30; --border:#1e2433; --border-strong:#2a3042;
  --border-focus:#7a73ff;
  --text:#f4f5f8; --text-soft:#c9cdd8; --text-muted:#8b91a3; --text-faint:#62687a;
  --primary:#7a73ff; --primary-hover:#635bff; --primary-soft:#1c1e3d;
  --topbar-bg:rgba(14,19,32,.85);
  --modal-scrim:rgba(0,0,0,.62);
  --drawer-scrim:rgba(0,0,0,.50);
  --success:#7a73ff; --success-bg:rgba(122,115,255,.14);
  --warning:#9ba1b3; --warning-bg:rgba(155,161,179,.10);
  --danger:#f4f5f8; --danger-bg:rgba(255,255,255,.06);
  --info:#7a73ff; --info-bg:rgba(122,115,255,.14);
  --status-done-bg:rgba(122,115,255,.18); --status-done-fg:#c5c0ff; --status-done-bd:rgba(122,115,255,.32);
  --status-working-bg:rgba(99,91,255,.20); --status-working-fg:#b8b3ff; --status-working-bd:rgba(122,115,255,.30);
  --status-stuck-bg:rgba(255,255,255,.06); --status-stuck-fg:#f4f5f8; --status-stuck-bd:rgba(255,255,255,.16);
  --status-notstarted-bg:rgba(139,145,163,.12); --status-notstarted-fg:#c9cdd8; --status-notstarted-bd:rgba(139,145,163,.22);
  --pulse-critical-bg:rgba(79,70,229,.22); --pulse-critical-fg:#c5c0ff; --pulse-critical-bd:rgba(122,115,255,.34); --pulse-critical-dot:#7a73ff;
  --pulse-high-bg:rgba(122,115,255,.16); --pulse-high-fg:#b8b3ff; --pulse-high-bd:rgba(122,115,255,.26); --pulse-high-dot:#7a73ff;
  --pulse-live:#7a73ff;
  --orb-glow:rgba(122,115,255,.50);
  --spark-area-top:rgba(122,115,255,.26); --spark-area-bottom:rgba(122,115,255,0);
  --shadow-xs:0 1px 2px rgba(0,0,0,.45);
  --shadow-sm:0 2px 5px -1px rgba(0,0,0,.45), 0 1px 3px -1px rgba(0,0,0,.40);
  --shadow-md:0 8px 22px -8px rgba(0,0,0,.55), 0 4px 10px -4px rgba(0,0,0,.45);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.65), 0 8px 18px -8px rgba(0,0,0,.55);
  --grad: linear-gradient(135deg,#8c86ff 0%, #7a73ff 35%, #635bff 65%, #4f46e5 100%);
}

/* 300ms cross-fade when the video stage swaps to the dark theme */
html, body{
  transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}