/* ============================================================================
   theme.css — vCyberiz Threat Intelligence, unified design tokens (v2 redesign)
   Loaded LAST on every page so these token values win the cascade and re-skin
   the whole site coherently. Elevates the existing dark "cyber" identity into a
   more premium, layered, high-contrast system. Keeps the same variable NAMES the
   pages already use, so no page markup has to change.
   ============================================================================ */

/* ---- Light theme (kept sensible; app defaults to dark) ------------------- */
:root {
    --bg-primary: #f4f6fb;
    --bg-secondary: #ffffff;
    --bg-tertiary: #eef1f7;
    --bg-elevated: #ffffff;
    --sidebar-bg: #ffffff;

    --text-primary: #0d1526;
    --text-secondary: #55617a;
    --text-tertiary: #8a94a8;
    --heading-color: #0b1220;
    --text-color: var(--text-primary);
    --bg-color: var(--bg-primary);

    --border-color: rgba(13, 21, 38, 0.10);
    --border-light: rgba(13, 21, 38, 0.06);
    --hover-bg: rgba(13, 21, 38, 0.04);
    --active-bg: rgba(13, 21, 38, 0.06);

    --card-bg: #ffffff;
    --card-border: rgba(13, 21, 38, 0.08);
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-border: rgba(13, 21, 38, 0.08);
    --glass-stroke: rgba(13, 21, 38, 0.08);
    --glass-highlight: rgba(255, 255, 255, 0.9);

    --input-bg: #ffffff;
    --input-text: #0d1526;
    --input-placeholder: #97a1b4;

    --accent-color: #0d9488;
    --accent-color-rgb: 13, 148, 136;
    --accent-color-hover: #0f766e;
    --accent-color-2: #7c3aed;
    --accent-color-3: #db2777;
    --select-accent: #7c3aed;
    --select-accent-rgb: 124, 58, 237;
    --select-accent-2: #db2777;

    --danger-color: #e11d48;
    --danger-color-rgb: 225, 29, 72;
    --warning-color: #d97706;
    --warning-color-rgb: 217, 119, 6;
    --safe-color: #059669;
    --safe-color-rgb: 5, 150, 105;
    --neutral-color: #7c3aed;
    --neutral-color-rgb: 124, 58, 237;

    --sev-critical: #e11d48;
    --sev-high: #ea580c;
    --sev-medium: #d97706;
    --sev-low: #0284c7;
    --sev-none: #64748b;

    --grid-line-color: rgba(99, 102, 241, 0.10);
    --gradient-color-1: rgba(56, 189, 248, 0.16);
    --gradient-color-2: rgba(168, 85, 247, 0.14);

    --shadow-sm: 0 1px 2px rgba(13, 21, 38, 0.06), 0 2px 8px rgba(13, 21, 38, 0.05);
    --shadow-md: 0 6px 20px rgba(13, 21, 38, 0.08);
    --shadow-lg: 0 20px 48px rgba(13, 21, 38, 0.12);
}

/* ---- Dark theme — the primary experience ("Obsidian Cyber") -------------- */
[data-theme="dark"] {
    /* Layered near-black surfaces (cool blue undertone) */
    --bg-primary: #070a11;
    --bg-secondary: #0d121c;
    --bg-tertiary: #131a26;
    --bg-elevated: #1a2330;
    --sidebar-bg: #090d15;
    --bg-color: var(--bg-primary);

    --text-primary: #eef2f8;
    --text-secondary: #9aa6bd;
    --text-tertiary: #6b7788;
    --heading-color: #f6f9ff;
    --text-color: var(--text-primary);

    --border-color: rgba(255, 255, 255, 0.075);
    --border-light: rgba(255, 255, 255, 0.13);
    --hover-bg: rgba(255, 255, 255, 0.055);
    --active-bg: rgba(255, 255, 255, 0.085);

    /* Glass surfaces */
    --card-bg: rgba(255, 255, 255, 0.025);
    --card-border: rgba(255, 255, 255, 0.09);
    --glass-bg: rgba(255, 255, 255, 0.028);
    --glass-border: rgba(255, 255, 255, 0.09);
    --glass-stroke: rgba(255, 255, 255, 0.10);
    --glass-highlight: rgba(255, 255, 255, 0.06);

    --input-bg: rgba(255, 255, 255, 0.028);
    --input-text: #eef2f8;
    --input-placeholder: #67728a;

    /* Signature accent: vivid teal, plus cyan→violet→magenta gradient family */
    --accent-color: #2ee6c6;
    --accent-color-rgb: 46, 230, 198;
    --accent-color-hover: #55f0d6;
    --accent-color-2: #8b5cf6;
    --accent-color-3: #ff6bd6;
    --select-accent: #8b5cf6;
    --select-accent-rgb: 139, 92, 246;
    --select-accent-2: #ff6bd6;

    /* Status palette (threat-severity semantics) */
    --danger-color: #fb5a72;
    --danger-color-rgb: 251, 90, 114;
    --warning-color: #fbbf24;
    --warning-color-rgb: 251, 191, 36;
    --safe-color: #34d399;
    --safe-color-rgb: 52, 211, 153;
    --neutral-color: #8b5cf6;
    --neutral-color-rgb: 139, 92, 246;

    --sev-critical: #fb5a72;
    --sev-high: #fb923c;
    --sev-medium: #fbbf24;
    --sev-low: #38bdf8;
    --sev-none: #64748b;

    /* Ambient gradient + grid used by page backgrounds */
    --grid-line-color: rgba(120, 130, 255, 0.10);
    --gradient-color-1: rgba(45, 212, 238, 0.30);
    --gradient-color-2: rgba(168, 85, 247, 0.26);

    /* Deep layered shadows + accent glow for dark surfaces */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.6);
    --glow-accent: 0 0 0 1px rgba(var(--accent-color-rgb), 0.35), 0 10px 40px rgba(var(--accent-color-rgb), 0.18);
}

/* ---- Shared primitives used by both themes ------------------------------- */
:root,
[data-theme="dark"] {
    --font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

    /* Signature brand gradient (buttons, active states, accents) */
    --primary-gradient: linear-gradient(135deg, #22d3ee 0%, #7c5cff 52%, #e457f0 100%);
    --button-bg: var(--primary-gradient);
    --button-hover-filter: brightness(1.08) saturate(1.05);
    --button-text: #ffffff;

    /* Modular radius scale */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-8: 48px;

    /* Motion */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast: 0.15s;
    --dur: 0.28s;
}