/* ============================================================
   ShieldTech Secret Weapon — Colors & Type
   Dark-mode-first command center for a private AI sales assistant.
   ============================================================ */

/* ---------- Brand fonts (self-hosted) ----------
   Full @font-face block lives in assets/fonts/_faces.css. It declares:
     - Inter (18pt)   — body & UI default; weights 100–900, italic + roman
     - Inter 24pt     — sub-display optical size; same weights & styles
     - Inter 28pt     — display optical size; same weights & styles
     - Rajdhani       — display headline face; weights 300–700
     - JetBrains Mono — diagnostics / numerics; weights 100–800, italic + roman
   Anything pulled into the @import closure of this file gets all 75 faces. */
/* Fonts loaded via Google Fonts in index.html */

:root {
  /* ---------- Surface ---------- */
  --bg-1: #05070A;          /* deepest — app background */
  --bg-2: #0B1118;          /* secondary surface */
  --card: #101923;          /* default card */
  --card-elev: #142131;     /* elevated card */
  --border: #1E293B;        /* default border / divider */
  --border-strong: #334155; /* stronger divider */

  /* ---------- Text ---------- */
  --fg-1: #F8FAFC;          /* primary text */
  --fg-2: #CBD5E1;          /* secondary text */
  --fg-muted: #94A3B8;      /* muted / meta */

  /* ---------- Brand ---------- */
  --blue: #00A3FF;          /* ShieldTech accent blue */
  --blue-electric: #29C7FF; /* gradient pair / highlight */
  --blue-deep: #0369A1;     /* pressed / deep */

  /* ---------- Semantic ---------- */
  --success: #22C55E;
  --warning: #F59E0B;
  --danger:  #EF4444;
  --assistant: #A855F7;     /* AI / assistant / approvals */

  /* ---------- Lead status (filled badge) ---------- */
  --hot-bg: #3B0D0D;     --hot-fg: #FCA5A5;     --hot-border: #7F1D1D;
  --warm-bg: #3A2506;    --warm-fg: #FCD34D;    --warm-border: #92400E;
  --nurture-bg: #082F49; --nurture-fg: #7DD3FC; --nurture-border: #075985;
  --dead-bg: #1E293B;    --dead-fg: #94A3B8;    --dead-border: #334155;
  --done-bg: #052E16;    --done-fg: #86EFAC;    --done-border: #166534;
  --approval-bg: #2E1065;--approval-fg: #D8B4FE;--approval-border: #6B21A8;

  /* ---------- Radii ---------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 24px;
  --r-full: 999px;

  /* ---------- Spacing scale ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;

  /* ---------- Shadows / glows ---------- */
  --shadow-card:     0 12px 40px rgba(0,0,0,0.28);
  --shadow-elevated: 0 20px 60px rgba(0,0,0,0.38);
  --glow-blue:       0 0 24px rgba(0, 163, 255, 0.28);
  --glow-purple:     0 0 24px rgba(168, 85, 247, 0.22);

  /* ---------- Fonts ----------
     Display — Rajdhani: tall, slightly condensed, technical feel. Pairs with
     the shield mark and reads well on dark backgrounds. Use for the wordmark,
     section headers, and HUD-style numerics.
     Sans — Inter: app body, lists, form labels, captions.
     Mono — JetBrains Mono: phone numbers, IDs, diagnostics, code-style numbers. */
  --font-display: "Rajdhani", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-sans: Inter, "SF Pro Display", "SF Pro Text", ui-sans-serif, system-ui,
               -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* ---------- Type tokens ---------- */
  --t-display-xl: 600 44px/48px var(--font-display);
  --t-display-lg: 600 34px/40px var(--font-display);
  --t-h1:         600 30px/36px var(--font-display);
  --t-h2:         600 26px/32px var(--font-display);
  --t-h3:         600 22px/28px var(--font-display);
  --t-body-lg:    400 18px/28px var(--font-sans);
  --t-body:       400 16px/24px var(--font-sans);
  --t-body-sm:    400 14px/20px var(--font-sans);
  --t-caption:    500 12px/16px var(--font-sans);
  --t-mono-sm:    500 13px/18px var(--font-mono);

  /* ---------- Backgrounds ---------- */
  --grad-blue: linear-gradient(135deg, var(--blue), var(--blue-electric));
  --grad-purple: linear-gradient(135deg, #7C3AED, var(--assistant));
  --ambient-glow:
    radial-gradient(circle at top right, rgba(0,163,255,0.18), transparent 32%),
    radial-gradient(circle at bottom left, rgba(168,85,247,0.10), transparent 28%),
    var(--bg-1);
}

/* ---------- Base ---------- */
html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font: var(--t-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Semantic type ---------- */
h1 { font: var(--t-h1); letter-spacing: 0.01em; margin: 0; }
h2 { font: var(--t-h2); letter-spacing: 0.01em; margin: 0; }
h3 { font: var(--t-h3); letter-spacing: 0.01em; margin: 0; }
p  { font: var(--t-body); margin: 0; color: var(--fg-2); }
small, .caption { font: var(--t-caption); color: var(--fg-muted); letter-spacing: 0.04em; text-transform: uppercase; }
code, kbd, .mono { font: var(--t-mono-sm); color: var(--fg-2); }

.display-xl { font: var(--t-display-xl); letter-spacing: 0.02em; text-transform: uppercase; }
.display-lg { font: var(--t-display-lg); letter-spacing: 0.02em; text-transform: uppercase; }
.body-lg { font: var(--t-body-lg); }
.body-sm { font: var(--t-body-sm); color: var(--fg-2); }

/* ---------- Reusable building blocks ---------- */
.app-shell {
  min-height: 100dvh;
  background: var(--ambient-glow);
}

.glass-card {
  background: rgba(16, 25, 35, 0.82);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.btn-primary {
  min-height: 52px;
  padding: 0 var(--s-6);
  border-radius: var(--r-lg);
  background: var(--grad-blue);
  color: #051A2B;
  font: 700 16px/1 var(--font-sans);
  letter-spacing: -0.005em;
  box-shadow: var(--glow-blue);
  border: 0;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, filter .15s ease;
}
.btn-primary:hover  { filter: brightness(1.06); }
.btn-primary:active { transform: scale(0.985); }

.btn-secondary {
  min-height: 48px;
  padding: 0 var(--s-5);
  border-radius: var(--r-lg);
  background: var(--card-elev);
  color: var(--fg-1);
  border: 1px solid var(--border);
  font: 600 15px/1 var(--font-sans);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.btn-secondary:hover { background: #1A2A3D; border-color: var(--border-strong); }

.bottom-safe { padding-bottom: max(16px, env(safe-area-inset-bottom)); }