intercept/static/css/core/variables.css

/**
 * INTERCEPT Design Tokens
 * Single source of truth for colors, spacing, typography, and effects
 * Import this file FIRST in any stylesheet that needs design tokens
 */

:root {
    /* ============================================
       COLOR PALETTE - Dark Theme (Default)
       ============================================ */

    /* Backgrounds - layered depth system */
    --bg-primary: #0a0c10;
    --bg-secondary: #0f1218;
    --bg-tertiary: #151a23;
    --bg-card: #121620;
    --bg-elevated: #1a202c;
    --bg-overlay: rgba(0, 0, 0, 0.7);

    /* Background aliases for components */
    --bg-dark: var(--bg-primary);
    --bg-panel: var(--bg-secondary);

    /* Accent colors */
    --accent-cyan: #4a9eff;
    --accent-cyan-dim: rgba(74, 158, 255, 0.15);
    --accent-cyan-hover: #6bb3ff;
    --accent-green: #22c55e;
    --accent-green-dim: rgba(34, 197, 94, 0.15);
    --accent-red: #ef4444;
    --accent-red-dim: rgba(239, 68, 68, 0.15);
    --accent-orange: #f59e0b;
    --accent-orange-dim: rgba(245, 158, 11, 0.15);
    --accent-amber: #d4a853;
    --accent-amber-dim: rgba(212, 168, 83, 0.15);
    --accent-yellow: #eab308;
    --accent-purple: #a855f7;

    /* Text hierarchy */
    --text-primary: #e8eaed;
    --text-secondary: #9ca3af;
    --text-dim: #4b5563;
    --text-muted: #374151;
    --text-inverse: #0a0c10;

    /* Borders */
    --border-color: #1f2937;
    --border-light: #374151;
    --border-glow: rgba(74, 158, 255, 0.2);
    --border-focus: var(--accent-cyan);

    /* Status colors */
    --status-online: #22c55e;
    --status-warning: #f59e0b;
    --status-error: #ef4444;
    --status-offline: #6b7280;
    --status-info: #3b82f6;

    /* ============================================
       SPACING SCALE
       ============================================ */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

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

    /* Font sizes */
    --text-xs: 10px;
    --text-sm: 12px;
    --text-base: 14px;
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 20px;
    --text-3xl: 24px;
    --text-4xl: 30px;

    /* Font weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Line heights */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    /* ============================================
       BORDERS & RADIUS
       ============================================ */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 9999px;

    /* ============================================
       SHADOWS
       ============================================ */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(74, 158, 255, 0.15);

    /* ============================================
       TRANSITIONS
       ============================================ */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* ============================================
       Z-INDEX SCALE
       ============================================ */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-toast: 600;
    --z-tooltip: 700;

    /* ============================================
       LAYOUT
       ============================================ */
    --header-height: 60px;
    --nav-height: 44px;
    --sidebar-width: 280px;
    --stats-strip-height: 36px;
    --content-max-width: 1400px;
}

/* ============================================
   LIGHT THEME OVERRIDES
   ============================================ */
[data-theme="light"] {
    --bg-primary: #f8fafc;
    --bg-secondary: #f1f5f9;
    --bg-tertiary: #e2e8f0;
    --bg-card: #ffffff;
    --bg-elevated: #f8fafc;
    --bg-overlay: rgba(255, 255, 255, 0.9);

    /* Background aliases for components */
    --bg-dark: var(--bg-primary);
    --bg-panel: var(--bg-secondary);

    --accent-cyan: #2563eb;
    --accent-cyan-dim: rgba(37, 99, 235, 0.1);
    --accent-cyan-hover: #1d4ed8;
    --accent-green: #16a34a;
    --accent-green-dim: rgba(22, 163, 74, 0.1);
    --accent-red: #dc2626;
    --accent-red-dim: rgba(220, 38, 38, 0.1);
    --accent-orange: #d97706;
    --accent-orange-dim: rgba(217, 119, 6, 0.1);
    --accent-amber: #b45309;
    --accent-amber-dim: rgba(180, 83, 9, 0.1);

    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-dim: #94a3b8;
    --text-muted: #cbd5e1;
    --text-inverse: #f8fafc;

    --border-color: #e2e8f0;
    --border-light: #cbd5e1;
    --border-glow: rgba(37, 99, 235, 0.15);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
    --shadow-glow: 0 0 20px rgba(37, 99, 235, 0.1);
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0ms;
        --transition-base: 0ms;
        --transition-slow: 0ms;
    }
}