/* ==============================================================
   CRISIS DESIGN TOKENS  —  "Calm Command Center"
   Comprehensive token system for the run-centered UI.
   All modules, components, and templates consume these tokens.
   ============================================================== */

:root {
    /* ── Font Stacks ─────────────────────────────────────────── */
    --crisis-font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --crisis-font-mono:  'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', monospace;

    /* ── Typography Scale (base 16px) ────────────────────────── */
    --crisis-text-xs:    0.75rem;    /* 12px — micro labels, badges */
    --crisis-text-sm:    0.8125rem;  /* 13px — table cells, metadata */
    --crisis-text-base:  0.875rem;   /* 14px — body text, inputs */
    --crisis-text-md:    0.9375rem;  /* 15px — nav links, emphasized */
    --crisis-text-lg:    1rem;       /* 16px — section headers */
    --crisis-text-xl:    1.125rem;   /* 18px — page titles */
    --crisis-text-2xl:   1.375rem;   /* 22px — run name */
    --crisis-text-3xl:   1.75rem;    /* 28px — KPI numbers */

    /* ── Font Weights ────────────────────────────────────────── */
    --crisis-weight-normal:    400;
    --crisis-weight-medium:    500;
    --crisis-weight-semibold:  600;
    --crisis-weight-bold:      700;

    /* ── Surface / Background ────────────────────────────────── */
    --crisis-bg:               #f8f9fb;
    --crisis-surface:          #ffffff;
    --crisis-surface-alt:      #f1f3f5;
    --crisis-surface-raised:   #ffffff;
    --crisis-surface-hover:    #f8f9fa;
    --crisis-surface-inset:    #f1f3f5;

    /* ── Border ──────────────────────────────────────────────── */
    --crisis-border:           #e5e7eb;
    --crisis-border-light:     #f0f1f3;
    --crisis-border-strong:    #d1d5db;

    /* ── Typography / Text ───────────────────────────────────── */
    --crisis-text:             #1f2937;
    --crisis-text-secondary:   #6b7280;
    --crisis-text-muted:       #9ca3af;
    --crisis-text-inverse:     #ffffff;

    /* ── Accent / Brand ──────────────────────────────────────── */
    --crisis-accent:           #2563eb;
    --crisis-accent-hover:     #1d4ed8;
    --crisis-accent-light:     #eff6ff;
    --crisis-accent-subtle:    rgba(37, 99, 235, 0.08);

    /* ── Status Colors ───────────────────────────────────────── */
    --crisis-success:          #10b981;
    --crisis-success-light:    rgba(16, 185, 129, 0.10);
    --crisis-warning:          #f59e0b;
    --crisis-warning-light:    rgba(245, 158, 11, 0.10);
    --crisis-danger:           #ef4444;
    --crisis-danger-light:     rgba(239, 68, 68, 0.10);
    --crisis-info:             #3b82f6;
    --crisis-info-light:       rgba(59, 130, 246, 0.10);

    /* ── Run Status Colors (the product's primary visual signal) ─ */
    --run-draft:               #94a3b8;
    --run-draft-bg:            rgba(148, 163, 184, 0.10);
    --run-ready:               #60a5fa;
    --run-ready-bg:            rgba(96, 165, 250, 0.10);
    --run-live:                #22c55e;
    --run-live-bg:             rgba(34, 197, 94, 0.10);
    --run-paused:              #f59e0b;
    --run-paused-bg:           rgba(245, 158, 11, 0.10);
    --run-ended:               #ef4444;
    --run-ended-bg:            rgba(239, 68, 68, 0.10);
    --run-archived:            #6b7280;
    --run-archived-bg:         rgba(107, 114, 128, 0.10);

    /* ── Module Accent Colors ────────────────────────────────── */
    --module-news:             #e74c3c;
    --module-news-bg:          rgba(231, 76, 60, 0.08);
    --module-squawk:           #1da1f2;
    --module-squawk-bg:        rgba(29, 161, 242, 0.08);
    --module-mail:             #f39c12;
    --module-mail-bg:          rgba(243, 156, 18, 0.08);
    --module-company:          #27ae60;
    --module-company-bg:       rgba(39, 174, 96, 0.08);
    --module-pilotage:         #8b5cf6;
    --module-pilotage-bg:      rgba(139, 92, 246, 0.08);
    --module-exercise:         #8b5cf6;
    --module-exercise-bg:      rgba(139, 92, 246, 0.08);
    --module-eval:             #06b6d4;
    --module-eval-bg:          rgba(6, 182, 212, 0.08);
    --module-inject:           #f97316;
    --module-inject-bg:        rgba(249, 115, 22, 0.08);

    /* ── Radius (consistent rounding) ────────────────────────── */
    --crisis-radius-xs:        4px;
    --crisis-radius-sm:        6px;
    --crisis-radius:           8px;
    --crisis-radius-md:        10px;
    --crisis-radius-lg:        12px;
    --crisis-radius-xl:        16px;
    --crisis-radius-pill:      9999px;

    /* ── Shadows (3 levels) ──────────────────────────────────── */
    --crisis-shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.04);
    --crisis-shadow:           0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --crisis-shadow-md:        0 2px 8px rgba(0, 0, 0, 0.08);
    --crisis-shadow-lg:        0 4px 16px rgba(0, 0, 0, 0.10);
    --crisis-shadow-xl:        0 8px 30px rgba(0, 0, 0, 0.12);

    /* ── Transitions ─────────────────────────────────────────── */
    --crisis-transition-fast:  100ms ease;
    --crisis-transition:       150ms ease;
    --crisis-transition-slow:  250ms ease-out;
    --crisis-transition-drawer: 220ms ease;

    /* ── Spacing (4px grid) ──────────────────────────────────── */
    --crisis-space-1:          4px;
    --crisis-space-2:          8px;
    --crisis-space-3:          12px;
    --crisis-space-4:          16px;
    --crisis-space-5:          20px;
    --crisis-space-6:          24px;
    --crisis-space-8:          32px;
    --crisis-space-10:         40px;
    --crisis-space-12:         48px;

    /* backwards-compatible aliases */
    --crisis-space-xs:         4px;
    --crisis-space-sm:         8px;
    --crisis-space-md:         16px;
    --crisis-space-lg:         24px;
    --crisis-space-xl:         32px;

    /* ── Shell Layout ────────────────────────────────────────── */
    --topbar-h:                48px;
    --rail-w:                  60px;
    --drawer-w:                240px;
    --content-max-w:           1400px;

    /* ── Z-Index Scale ───────────────────────────────────────── */
    --z-rail:                  100;
    --z-drawer:                110;
    --z-topbar:                200;
    --z-mobile-nav:            200;
    --z-mobile-backdrop:       299;
    --z-mobile-drawer:         300;
    --z-dropdown:              1000;
    --z-modal-backdrop:        13040;
    --z-modal:                 13050;
    --z-toast:                 11000;
    --z-onboard:               12000;
}

/* ── Dark Mode Tokens ────────────────────────────────────────── */
[data-theme="dark"] {
    --crisis-bg:               #0f1117;
    --crisis-surface:          #1a1d27;
    --crisis-surface-alt:      #151820;
    --crisis-surface-raised:   #222633;
    --crisis-surface-hover:    #252938;
    --crisis-surface-inset:    #13151c;

    --crisis-border:           #2d3348;
    --crisis-border-light:     #1e2235;
    --crisis-border-strong:    #3d4560;

    --crisis-text:             #f1f5f9;
    --crisis-text-secondary:   #94a3b8;
    --crisis-text-muted:       #64748b;
    --crisis-text-inverse:     #0f1117;

    --crisis-accent:           #60a5fa;
    --crisis-accent-hover:     #3b82f6;
    --crisis-accent-light:     rgba(96, 165, 250, 0.12);
    --crisis-accent-subtle:    rgba(96, 165, 250, 0.06);

    --crisis-success-light:    rgba(16, 185, 129, 0.15);
    --crisis-warning-light:    rgba(245, 158, 11, 0.15);
    --crisis-danger-light:     rgba(239, 68, 68, 0.15);
    --crisis-info-light:       rgba(59, 130, 246, 0.15);

    --run-draft-bg:            rgba(148, 163, 184, 0.15);
    --run-ready-bg:            rgba(96, 165, 250, 0.15);
    --run-live-bg:             rgba(34, 197, 94, 0.15);
    --run-paused-bg:           rgba(245, 158, 11, 0.15);
    --run-ended-bg:            rgba(239, 68, 68, 0.15);
    --run-archived-bg:         rgba(107, 114, 128, 0.15);

    --module-news-bg:          rgba(231, 76, 60, 0.12);
    --module-squawk-bg:        rgba(29, 161, 242, 0.12);
    --module-mail-bg:          rgba(243, 156, 18, 0.12);
    --module-company-bg:       rgba(39, 174, 96, 0.12);
    --module-pilotage-bg:      rgba(139, 92, 246, 0.12);
    --module-exercise-bg:      rgba(139, 92, 246, 0.12);
    --module-eval-bg:          rgba(6, 182, 212, 0.12);
    --module-inject-bg:        rgba(249, 115, 22, 0.12);

    --crisis-shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.20);
    --crisis-shadow:           0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.18);
    --crisis-shadow-md:        0 2px 8px rgba(0, 0, 0, 0.30);
    --crisis-shadow-lg:        0 4px 16px rgba(0, 0, 0, 0.35);
    --crisis-shadow-xl:        0 8px 30px rgba(0, 0, 0, 0.40);
}