/* ============================================================
   TRUEVENCE DESIGN SYSTEM - VARIABLES
   Security-first CSS custom properties
   ============================================================ */

:root {
    /* ============================================================
       COLOR PALETTE - BRAND
       ============================================================ */
    --ink: #0B1230;
    --navy: #131B45;
    --navylite: #1E2A5E;
    --navy-950: #0a0620;
    --navy-900: #0e0a26;
    
    --violet: #7C3AED;
    --violet-600: #6d28d9;
    --violet-500: #7c3aed;
    --violet-400: #8b5cf6;
    --violetlt: #A78BFA;
    --lavender: #C9BEFB;
    --lavender-100: #ede9fe;
    
    /* ============================================================
       COLOR PALETTE - NEUTRALS
       ============================================================ */
    --paper: #F7F7FB;
    --paperdim: #EFEEF9;
    --panel-bg: #f4f2fa;
    --bg-body: #f7f7fb;
    --bg-card: #ffffff;
    
    --slate: #545A78;
    --slate-lt: #8489A6;
    --text-primary: #0B1230;
    --text-secondary: #545A78;
    
    --ink-900: #14102b;
    --ink-600: #4b4560;
    --ink-400: #8783a0;
    
    /* ============================================================
       COLOR PALETTE - SEMANTIC (REMAPPED TO BRAND-ONLY)
       Names unchanged so nothing downstream breaks.
       ============================================================ */
    --success: #7C3AED;
    --success-bg: #EDE9FE;
    
    --warning: #6D28D9;
    --warning-bg: #DDD6FE;
    
    --danger: #0B1230;
    --danger-bg: #E5E7F0;
    
    --info: #5B21B6;
    --info-bg: #EDE9FE;
    
    /* ============================================================
       CHART / STATUS BAR PALETTE — 5 purple/gray shades
       ============================================================ */
    --bar-1: #C9BEFB;
    --bar-2: #A78BFA;
    --bar-3: #8B5CF6;
    --bar-4: #7C3AED;
    --bar-5: #0B1230;
    
    /* ============================================================
       BORDERS
       ============================================================ */
    --border: rgba(19, 27, 69, 0.10);
    --border-soft: rgba(19, 27, 69, 0.07);
    --border-color: rgba(19, 27, 69, 0.10);
    --border-light: #e3ddf5;
    
    /* ============================================================
       RADII
       ============================================================ */
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 14px;
    
    /* ============================================================
       SHADOWS
       ============================================================ */
    --shadow-sm: 0 1px 2px rgba(11, 18, 48, 0.06);
    --shadow-md: 0 8px 24px -8px rgba(11, 18, 48, 0.14);
    --shadow-lg: 0 24px 60px -20px rgba(11, 18, 48, 0.30);
    --shadow: 0 1px 2px rgba(11, 18, 48, 0.06);
    
    /* ============================================================
       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;
    
    /* ============================================================
       TRANSITIONS
       ============================================================ */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;
    
    /* ============================================================
       Z-INDEX SCALE
       ============================================================ */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-toast: 1060;
    --z-tooltip: 1070;
    
    /* ============================================================
       LAYOUT
       ============================================================ */
    --sidebar-w: 248px;
    --container-padding: 28px;
    --content-max-width: 1400px;
    
    /* ============================================================
       TYPOGRAPHY
       ============================================================ */
    --font-display: 'Plus Jakarta Sans', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
}

/* ============================================================
   DARK THEME OVERRIDES
   ============================================================ */
body.theme-dark {
    --bg-body: #121212;
    --bg-card: #1e1e1e;
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0a0;
    --border-color: rgba(255, 255, 255, 0.1);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
    
    --paper: #2a2a2a;
    --paperdim: #333;
    --panel-bg: #1a1a1a;
    
    --slate: #aaa;
    --slate-lt: #888;
    --ink: #eee;
    --navy: #2a2a3a;
    --navylite: #3a3a4a;
    
    --border: rgba(255, 255, 255, 0.1);
    --border-soft: rgba(255, 255, 255, 0.08);
    --border-light: #444;
    
    /* Dark-mode brand-family backgrounds */
    --success-bg: #2a1a3a;
    --warning-bg: #3a2a4a;
    --danger-bg: #2a2a3a;
    --info-bg: #2a1a3a;
    --lavender-100: #2a2a3a;
    
    --ink-900: #ddd;
    --ink-600: #aaa;
    --ink-400: #888;
    --violet-500: #9b6cf7;
    --violet-400: #b08cf9;
}

/* ============================================================
   INVERT THEME OVERRIDES
   ============================================================ */
body.theme-invert {
    filter: invert(1) hue-rotate(180deg);
    background: #f7f7fb;
}

/* Keep images and logos from inverting */
body.theme-invert img,
body.theme-invert .sidebar-brand img,
body.theme-invert .logo,
body.theme-invert .slide-header img.logo {
    filter: invert(1) hue-rotate(180deg);
}

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