/**
 * 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: #0b1118;
    --bg-secondary: #101823;
    --bg-tertiary: #151f2b;
    --bg-card: #121a25;
    --bg-elevated: #1b2734;
    --bg-overlay: rgba(8, 13, 20, 0.75);
    --surface-glass: rgba(16, 25, 37, 0.82);
    --surface-panel-gradient: linear-gradient(160deg, rgba(20, 32, 47, 0.94) 0%, rgba(11, 18, 27, 0.96) 100%);
    --ambient-top-left: rgba(74, 163, 255, 0.14);
    --ambient-top-right: rgba(56, 193, 128, 0.09);
    --ambient-bottom: rgba(214, 168, 94, 0.06);

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

    /* Accent colors */
    --accent-cyan: #4aa3ff;
    --accent-cyan-dim: rgba(74, 163, 255, 0.16);
    --accent-cyan-hover: #6bb3ff;
    --accent-green: #38c180;
    --accent-green-dim: rgba(56, 193, 128, 0.18);
    --accent-red: #e25d5d;
    --accent-red-dim: rgba(226, 93, 93, 0.16);
    --accent-orange: #d6a85e;
    --accent-orange-dim: rgba(214, 168, 94, 0.16);
    --accent-amber: #d6a85e;
    --accent-amber-dim: rgba(214, 168, 94, 0.18);
    --accent-yellow: #e1c26b;
    --accent-purple: #8f7bd6;

    /* Text hierarchy */
    --text-primary: #d7e0ee;
    --text-secondary: #9fb0c7;
    --text-dim: #6f7f94;
    --text-muted: #445266;
    --text-inverse: #0b1118;

    /* Borders */
    --border-color: #263246;
    --border-light: #354458;
    --border-glow: rgba(74, 163, 255, 0.25);
    --border-focus: var(--accent-cyan);

    /* Status colors */
    --status-online: #38c180;
    --status-warning: #d6a85e;
    --status-error: #e25d5d;
    --status-offline: #6f7f94;
    --status-info: #4aa3ff;

    /* Severity colors */
    --severity-critical: #ff3366;
    --severity-high: #ff9933;
    --severity-medium: #ffcc00;
    --severity-low: #00ff88;

    /* Data visualization neon colors */
    --neon-green: #00ff88;
    --neon-yellow: #ffcc00;
    --neon-orange: #ff8800;
    --neon-red: #ff3366;

    /* Subtle grid/pattern */
    --grid-line: rgba(74, 163, 255, 0.1);
    --grid-dot: rgba(255, 255, 255, 0.03);
    --noise-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='40'%20viewBox='0%200%2040%2040'%3E%3Cg%20fill='%23ffffff'%20fill-opacity='0.05'%3E%3Ccircle%20cx='3'%20cy='5'%20r='1'/%3E%3Ccircle%20cx='11'%20cy='9'%20r='1'/%3E%3Ccircle%20cx='18'%20cy='3'%20r='1'/%3E%3Ccircle%20cx='26'%20cy='12'%20r='1'/%3E%3Ccircle%20cx='34'%20cy='6'%20r='1'/%3E%3Ccircle%20cx='7'%20cy='19'%20r='1'/%3E%3Ccircle%20cx='15'%20cy='24'%20r='1'/%3E%3Ccircle%20cx='28'%20cy='22'%20r='1'/%3E%3Ccircle%20cx='36'%20cy='18'%20r='1'/%3E%3Ccircle%20cx='5'%20cy='33'%20r='1'/%3E%3Ccircle%20cx='19'%20cy='32'%20r='1'/%3E%3Ccircle%20cx='31'%20cy='34'%20r='1'/%3E%3C/g%3E%3C/svg%3E");

    /* ============================================
       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: 'Roboto Condensed', 'Arial Narrow', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'Roboto Condensed', 'Arial Narrow', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* 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: 3px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-xl: 8px;
    --radius-full: 9999px;

    /* ============================================
       SHADOWS
       ============================================ */
    --shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 12px 18px rgba(0, 0, 0, 0.45);
    --shadow-glow: 0 0 18px rgba(74, 163, 255, 0.16);

    /* ============================================
       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: #f4f7fb;
    --bg-secondary: #e9eef5;
    --bg-tertiary: #dde5f0;
    --bg-card: #ffffff;
    --bg-elevated: #f1f4f9;
    --bg-overlay: rgba(244, 247, 251, 0.92);
    --surface-glass: rgba(255, 255, 255, 0.84);
    --surface-panel-gradient: linear-gradient(160deg, rgba(255, 255, 255, 0.96) 0%, rgba(241, 245, 251, 0.97) 100%);
    --ambient-top-left: rgba(31, 95, 168, 0.1);
    --ambient-top-right: rgba(31, 138, 87, 0.06);
    --ambient-bottom: rgba(181, 134, 58, 0.05);

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

    --accent-cyan: #1f5fa8;
    --accent-cyan-dim: rgba(31, 95, 168, 0.12);
    --accent-cyan-hover: #2c73bf;
    --accent-green: #1f8a57;
    --accent-green-dim: rgba(31, 138, 87, 0.12);
    --accent-red: #c74444;
    --accent-red-dim: rgba(199, 68, 68, 0.12);
    --accent-orange: #b5863a;
    --accent-orange-dim: rgba(181, 134, 58, 0.12);
    --accent-amber: #b5863a;
    --accent-amber-dim: rgba(181, 134, 58, 0.12);
    --accent-yellow: #9a8420;
    --accent-purple: #6b5ba8;

    /* Status colors - light theme */
    --status-online: #1f8a57;
    --status-warning: #b5863a;
    --status-error: #c74444;
    --status-offline: #6b7c93;
    --status-info: #1f5fa8;

    /* Severity colors */
    --severity-critical: #c74444;
    --severity-high: #b5863a;
    --severity-medium: #9a8420;
    --severity-low: #1f8a57;

    /* Data visualization neon replacements */
    --neon-green: #1a8a50;
    --neon-yellow: #9a8420;
    --neon-orange: #b5863a;
    --neon-red: #c74444;

    --text-primary: #122034;
    --text-secondary: #3a4a5f;
    --text-dim: #6b7c93;
    --text-muted: #aab6c8;
    --text-inverse: #f4f7fb;

    --border-color: #d1d9e6;
    --border-light: #c1ccdb;
    --border-glow: rgba(31, 95, 168, 0.12);

    --grid-line: rgba(31, 95, 168, 0.14);
    --grid-dot: rgba(12, 18, 24, 0.06);
    --noise-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='40'%20viewBox='0%200%2040%2040'%3E%3Cg%20fill='%23000000'%20fill-opacity='0.05'%3E%3Ccircle%20cx='3'%20cy='5'%20r='1'/%3E%3Ccircle%20cx='11'%20cy='9'%20r='1'/%3E%3Ccircle%20cx='18'%20cy='3'%20r='1'/%3E%3Ccircle%20cx='26'%20cy='12'%20r='1'/%3E%3Ccircle%20cx='34'%20cy='6'%20r='1'/%3E%3Ccircle%20cx='7'%20cy='19'%20r='1'/%3E%3Ccircle%20cx='15'%20cy='24'%20r='1'/%3E%3Ccircle%20cx='28'%20cy='22'%20r='1'/%3E%3Ccircle%20cx='36'%20cy='18'%20r='1'/%3E%3Ccircle%20cx='5'%20cy='33'%20r='1'/%3E%3Ccircle%20cx='19'%20cy='32'%20r='1'/%3E%3Ccircle%20cx='31'%20cy='34'%20r='1'/%3E%3C/g%3E%3C/svg%3E");

    --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 18px rgba(31, 95, 168, 0.1);
}

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