/**
 * DMS Smart Monitor v3.0.0
 * Brand Tokens - Core Design System
 * 
 * This file defines the ONLY allowed color palette for the entire application.
 * Do not add hex colors anywhere else - reference these CSS custom properties.
 * 
 * Brand Reference: DMS Monitor 2026
 */

:root {
    /* ==========================================================================
       BRAND COLORS - Primary Palette
       ========================================================================== */
    
    /* Background Colors */
    --bg-darker: #0f172a;           /* Deepest background - body, modals */
    --bg-navy: #1C2E4A;             /* Primary dark navy - sidebar, cards */
    
    /* Text Colors */
    --text-white: #FFFFFF;          /* Primary text on dark backgrounds */
    --text-white-muted: rgba(255, 255, 255, 0.7);  /* Secondary text */
    --text-white-subtle: rgba(255, 255, 255, 0.5); /* Tertiary/disabled text */
    
    /* Accent Colors */
    --accent-orange: #F58220;       /* Primary actions, CTAs, highlights */
    --accent-orange-hover: #e67310; /* Orange hover state */
    --accent-orange-subtle: rgba(245, 130, 32, 0.15); /* Orange background tint */
    
    --accent-blue: #B8D8EB;         /* Headings, labels, secondary accents */
    --accent-blue-hover: #a5cde4;   /* Blue hover state */
    --accent-blue-subtle: rgba(184, 216, 235, 0.15); /* Blue background tint */
    
    /* Card/Surface Colors */
    --card-bg: rgba(255, 255, 255, 0.05);           /* Card backgrounds */
    --card-bg-hover: rgba(255, 255, 255, 0.08);     /* Card hover state */
    --card-border: rgba(184, 216, 235, 0.2);        /* Card borders */
    --card-border-hover: rgba(184, 216, 235, 0.35); /* Border hover state */
    
    /* ==========================================================================
       SEMANTIC COLORS - Status & Feedback
       ========================================================================== */
    
    /* Success - Using accent-blue tint */
    --status-success: #22c55e;
    --status-success-subtle: rgba(34, 197, 94, 0.15);
    --status-success-border: rgba(34, 197, 94, 0.3);
    
    /* Warning - Using accent-orange tint */
    --status-warning: #F58220;
    --status-warning-subtle: rgba(245, 130, 32, 0.15);
    --status-warning-border: rgba(245, 130, 32, 0.3);
    
    /* Danger/Error */
    --status-danger: #ef4444;
    --status-danger-subtle: rgba(239, 68, 68, 0.15);
    --status-danger-border: rgba(239, 68, 68, 0.3);
    
    /* Info */
    --status-info: #B8D8EB;
    --status-info-subtle: rgba(184, 216, 235, 0.15);
    --status-info-border: rgba(184, 216, 235, 0.3);
    
    /* ==========================================================================
       TYPOGRAPHY
       ========================================================================== */
    
    /* Font Families */
    --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    
    /* Font Sizes */
    --text-xs: 0.75rem;     /* 12px */
    --text-sm: 0.875rem;    /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-lg: 1.125rem;    /* 18px */
    --text-xl: 1.25rem;     /* 20px */
    --text-2xl: 1.5rem;     /* 24px */
    --text-3xl: 1.875rem;   /* 30px */
    --text-4xl: 2.25rem;    /* 36px */
    
    /* Font Weights */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    
    /* Line Heights */
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    
    /* ==========================================================================
       SPACING & SIZING
       ========================================================================== */
    
    /* Border Radius */
    --radius-sm: 0.25rem;   /* 4px */
    --radius-md: 0.5rem;    /* 8px */
    --radius-lg: 0.75rem;   /* 12px */
    --radius-xl: 1rem;      /* 16px */
    --radius-2xl: 1.5rem;   /* 24px */
    --radius-full: 9999px;  /* Pill shape */
    
    /* Shadows - Dark theme optimized */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.5);
    
    /* Glass effect shadow */
    --shadow-glow-orange: 0 0 20px rgba(245, 130, 32, 0.3);
    --shadow-glow-blue: 0 0 20px rgba(184, 216, 235, 0.2);
    
    /* ==========================================================================
       TRANSITIONS
       ========================================================================== */
    
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
    --transition-slower: 500ms ease;
    
    /* ==========================================================================
       Z-INDEX SCALE
       ========================================================================== */
    
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 1080;
}

/* ==========================================================================
   DARK THEME DEFAULTS (Bootstrap 5 dark mode)
   ========================================================================== */

[data-bs-theme="dark"] {
    --bs-body-bg: var(--bg-darker);
    --bs-body-color: var(--text-white);
    --bs-emphasis-color: var(--text-white);
    --bs-secondary-color: var(--text-white-muted);
    --bs-tertiary-color: var(--text-white-subtle);
    
    --bs-primary: var(--accent-orange);
    --bs-primary-rgb: 245, 130, 32;
    
    --bs-info: var(--accent-blue);
    --bs-info-rgb: 184, 216, 235;
    
    --bs-success: var(--status-success);
    --bs-success-rgb: 34, 197, 94;
    
    --bs-warning: var(--status-warning);
    --bs-warning-rgb: 245, 130, 32;
    
    --bs-danger: var(--status-danger);
    --bs-danger-rgb: 239, 68, 68;
    
    --bs-border-color: var(--card-border);
    --bs-card-bg: var(--card-bg);
}