/* ============================================================
   LENDSCOPE — DESIGN TOKENS  (Direction A · Deep Navy & Electric Blue)
   Ported from Claude Design "LendScope" bundle (tokens.css).
   Single theme. Density toggle retained. Dark mode optional.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600;700&display=swap');

:root {
  /* Type — mono is Geist Mono sitewide (app pages load it via HTML link;
     marketing/auth load it via the @import above) so monospace numerals
     render in the same typeface everywhere. */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'Courier New', monospace;

  /* Radius scale */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;

  /* Shadows (capped at 0 4px 12px /.08 per design philosophy) */
  --sh-xs: 0 1px 2px rgba(0,0,0,.04);
  --sh-sm: 0 1px 3px rgba(0,0,0,.06);
  --sh-md: 0 1px 4px rgba(0,0,0,.08);
  --sh-lg: 0 4px 12px rgba(0,0,0,.08);
  --sh-card: 0 8px 32px rgba(0,0,0,.08);

  /* Density (default comfortable) */
  --row-h: 50px;
  --input-h: 32px;
  --btn-h: 40px;
  --sec-pad-y: 80px;

  /* Transition base */
  --tx-fast: 75ms;
  --tx-med: 150ms;

  /* Direction A — Deep Navy & Electric Blue (light) */
  --bg: #F8F9FB;
  --surface: #FFFFFF;
  --muted: #F3F4F6;
  --primary: #0F1F3D;
  --primary-fg: #FFFFFF;
  --accent: #2563EB;
  --accent-dark: #1D4ED8;
  --accent-light: #EFF6FF;
  --border-light: #E5E7EB;
  --border-medium: #D1D5DB;
  --text-1: #111827;
  --text-2: #374151;
  --text-3: #9CA3AF;

  /* Status — semantic only (green pass / amber refer / red fail) */
  --pass-bg: #ECFDF5;   --pass-text: #059669;   --pass-border: #A7F3D0;
  --refer-bg: #FFFBEB;  --refer-text: #D97706;  --refer-border: #FDE68A;
  --fail-bg: #FEF2F2;   --fail-text: #DC2626;   --fail-border: #FECACA;
  --neutral-bg: #F9FAFB; --neutral-text: #6B7280; --neutral-border: #E5E7EB;
}

/* ---------- DARK MODE (Direction A) ---------- */
[data-mode="dark"] {
  --bg: #0A0F1C;
  --surface: #111827;
  --muted: #1F2937;
  --primary: #E5E7EB;
  --primary-fg: #0F1F3D;
  --accent: #60A5FA;
  --accent-dark: #3B82F6;
  --accent-light: #1E3A8A;
  --border-light: #1F2937;
  --border-medium: #374151;
  --text-1: #F9FAFB;
  --text-2: #D1D5DB;
  --text-3: #6B7280;
  --pass-bg: #052e16;   --pass-text: #4ADE80;
  --refer-bg: #422006;  --refer-text: #FBBF24;
  --fail-bg: #450a0a;   --fail-text: #F87171;
}

/* ---------- DENSITY ---------- */
[data-density="compact"] {
  --row-h: 40px;
  --input-h: 28px;
  --btn-h: 34px;
  --sec-pad-y: 56px;
}