/* ==============================================================
   CRISIS DESIGN TOKENS
   Shared CSS custom properties used across all modules.
   Modules (mail, press, squawk) inherit from these defaults
   and can override per-context.
   ============================================================== */

:root {
    /* ── Surface / Background ──────────────────────────────────── */
    --crisis-bg:             #f7f8fa;
    --crisis-surface:        #ffffff;
    --crisis-surface-alt:    #f1f5f9;
    --crisis-surface-raised: #ffffff;

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

    /* ── Typography / Text ─────────────────────────────────────── */
    --crisis-text:           #1f2937;
    --crisis-text-secondary: #6b7280;
    --crisis-text-muted:     #9ca3af;
    --crisis-font-sans:      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --crisis-font-mono:      'SF Mono', 'Roboto Mono', Menlo, monospace;

    /* ── Accent / Brand ────────────────────────────────────────── */
    --crisis-accent:         #2563eb;
    --crisis-accent-hover:   #1d4ed8;
    --crisis-accent-light:   #eff6ff;

    /* ── Status ────────────────────────────────────────────────── */
    --crisis-success:        #10b981;
    --crisis-warning:        #f59e0b;
    --crisis-danger:         #ef4444;
    --crisis-info:           #3b82f6;

    /* ── Radius ────────────────────────────────────────────────── */
    --crisis-radius-sm:      4px;
    --crisis-radius:         8px;
    --crisis-radius-lg:      12px;
    --crisis-radius-pill:    9999px;

    /* ── Shadows ───────────────────────────────────────────────── */
    --crisis-shadow-sm:      0 1px 2px rgba(0,0,0,.05);
    --crisis-shadow:         0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
    --crisis-shadow-lg:      0 4px 12px rgba(0,0,0,.10);

    /* ── Transitions ───────────────────────────────────────────── */
    --crisis-transition:     150ms ease;
    --crisis-transition-slow: 300ms ease;

    /* ── Spacing ───────────────────────────────────────────────── */
    --crisis-space-xs:       4px;
    --crisis-space-sm:       8px;
    --crisis-space-md:       16px;
    --crisis-space-lg:       24px;
    --crisis-space-xl:       32px;
}

/* ── Dark Mode Tokens ────────────────────────────────────────── */
[data-theme="dark"] {
    --crisis-bg:             #0f172a;
    --crisis-surface:        #1e293b;
    --crisis-surface-alt:    #1a2332;
    --crisis-surface-raised: #334155;

    --crisis-border:         #334155;
    --crisis-border-light:   #1e293b;

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

    --crisis-accent:         #60a5fa;
    --crisis-accent-hover:   #3b82f6;
    --crisis-accent-light:   rgba(96,165,250,.12);

    --crisis-shadow-sm:      0 1px 2px rgba(0,0,0,.2);
    --crisis-shadow:         0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
    --crisis-shadow-lg:      0 4px 12px rgba(0,0,0,.35);
}