/* ═══════════════════════════════════════════════════════════
   Vauban Web App — Design Tokens
   Inherited from landing site, extended for SPA
   ═══════════════════════════════════════════════════════════ */

:root {
    /* ── Brand Colors ────────────────────────────────── */
    --color-primary:        hsl(225, 73%, 57%);
    --color-primary-light:  hsl(225, 73%, 67%);
    --color-primary-dark:   hsl(225, 73%, 42%);
    --color-primary-subtle: hsl(225, 73%, 12%);

    --color-accent:         hsl(160, 68%, 48%);
    --color-accent-light:   hsl(160, 68%, 58%);
    --color-accent-dark:    hsl(160, 68%, 36%);

    --color-warning:        hsl(38, 92%, 55%);
    --color-danger:         hsl(0, 72%, 55%);
    --color-danger-subtle:  hsl(0, 72%, 12%);
    --color-success:        hsl(145, 63%, 45%);
    --color-high:           hsl(25, 90%, 55%);
    --color-high-subtle:    hsl(25, 80%, 12%);

    /* ── Health Tiers ────────────────────────────────── */
    --color-health-excellent: #16A34A; /* Darker, deeper green (Excellent) */
    --color-health-good:      #84CC16; /* Lime/light green (Good) */
    --color-health-warning:   #FACC15; /* Matches 🟡 */
    --color-health-weak:      #FB923C; /* Matches 🟠 */
    --color-health-critical:  #EF4444; /* Matches 🔴 */

    /* ── AI Accent ───────────────────────────────────── */
    --color-ai:             hsl(260, 60%, 55%);
    --color-ai-light:       hsl(260, 70%, 70%);
    --color-ai-subtle:      hsl(260, 50%, 15%);

    /* ── Neutrals ────────────────────────────────────── */
    --color-bg:             hsl(228, 24%, 6%);
    --color-bg-elevated:    hsl(228, 20%, 14%);
    --color-bg-card:        hsl(228, 18%, 16%);
    --color-bg-card-hover:  hsl(228, 18%, 20%);
    --color-bg-subtle:      hsl(228, 15%, 22%);

    --color-surface:        hsl(228, 14%, 25%);
    --color-border:         hsl(228, 12%, 26%);
    --color-border-subtle:  hsl(228, 10%, 20%);

    --color-text:           hsl(220, 20%, 94%);
    --color-text-secondary: hsl(220, 12%, 62%);
    --color-text-muted:     hsl(220, 10%, 45%);

    /* ── Typography ──────────────────────────────────── */
    --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:  'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    --text-xs:   0.72rem;
    --text-sm:   0.82rem;
    --text-base: 0.9rem;
    --text-lg:   1rem;
    --text-xl:   1.15rem;
    --text-2xl:  1.35rem;
    --text-3xl:  1.75rem;

    /* ── Spacing ─────────────────────────────────────── */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    /* ── Borders ─────────────────────────────────────── */
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-full: 9999px;

    /* ── Shadows ─────────────────────────────────────── */
    --shadow-sm:   0 1px 2px hsl(0 0% 0% / 0.3);
    --shadow-md:   0 4px 12px hsl(0 0% 0% / 0.3);
    --shadow-lg:   0 8px 30px hsl(0 0% 0% / 0.4);
    --shadow-glow: 0 0 30px hsl(225 73% 57% / 0.15);

    /* ── Transitions ─────────────────────────────────── */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms ease;
    --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Layout ──────────────────────────────────────── */
    --sidebar-width:  260px;
    --header-height:  58px;
    --ai-panel-width: 420px;
}