:root {
    /* Primary Colors - Based on Logo (Navy Blue) */
    --primary-green: #1e40af;
    --primary-dark-green: #1e3a8a;
    --primary-light-green: #3b82f6;
    --primary-accent: #f97316;

    /* Secondary Colors (Orange) */
    --secondary-green: #f97316;
    --secondary-dark-green: #ea580c;
    --secondary-light-green: #fb923c;

    /* Light Mode Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --bg-card: rgba(255, 255, 255, 0.8);
    --bg-card-hover: rgba(255, 255, 255, 0.9);

    /* Text Colors - Light Mode */
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-muted: #64748b;
    --text-disabled: #94a3b8;

    /* Border Colors - Light Mode */
    --border-primary: rgba(0, 0, 0, 0.1);
    --border-secondary: rgba(0, 0, 0, 0.05);
    --border-accent: rgba(30, 64, 175, 0.3);

    /* Shadow Colors - Light Mode */
    --shadow-primary: rgba(0, 0, 0, 0.1);
    --shadow-secondary: rgba(0, 0, 0, 0.05);
    --shadow-green: rgba(30, 64, 175, 0.2);
    --shadow-accent: rgba(249, 115, 22, 0.2);

    /* Status Colors */
    --status-online: #10b981;
    --status-online-bg: rgba(16, 185, 129, 0.1);
    --status-offline: #ef4444;
    --status-offline-bg: rgba(239, 68, 68, 0.1);
    --status-warning: #f59e0b;
    --status-warning-bg: rgba(245, 158, 11, 0.1);

    /* Gradient Colors */
    --gradient-primary: linear-gradient(
        135deg,
        var(--primary-green) 0%,
        var(--primary-dark-green) 100%
    );
    --gradient-secondary: linear-gradient(
        135deg,
        var(--secondary-green) 0%,
        var(--secondary-dark-green) 100%
    );
    --gradient-blue-orange: linear-gradient(
        135deg,
        var(--primary-green) 0%,
        var(--primary-accent) 100%
    );
    --gradient-bg: linear-gradient(
        135deg,
        var(--bg-primary) 0%,
        var(--bg-secondary) 50%,
        var(--bg-tertiary) 100%
    );
    --gradient-card: linear-gradient(
        135deg,
        var(--bg-card) 0%,
        var(--bg-card-hover) 100%
    );
    --gradient-shimmer: linear-gradient(
        90deg,
        var(--primary-green),
        var(--primary-accent),
        var(--primary-green)
    );
    --gradient-card-accent: linear-gradient(
        135deg,
        rgba(30, 64, 175, 0.1) 0%,
        rgba(249, 115, 22, 0.1) 100%
    );

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;
    --spacing-3xl: 32px;
    --spacing-4xl: 40px;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;

    /* Typography */
    --font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-size-xs: 10px;
    --font-size-sm: 12px;
    --font-size-base: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 20px;
    --font-size-3xl: 24px;
    --font-size-4xl: 28px;
    --font-size-5xl: 32px;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* Z-Index */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal: 1040;
    --z-popover: 1050;
    --z-tooltip: 1060;
}

/* Dark Mode */
.dark-mode {
    /* Dark Mode Background Colors */
    --bg-primary: #000000 !important;
    --bg-secondary: #111111 !important;
    --bg-tertiary: #1a1a1a !important;
    --bg-card: rgba(255, 255, 255, 0.1) !important;
    --bg-card-hover: rgba(255, 255, 255, 0.05) !important;

    /* Dark Mode Text Colors */
    --text-primary: #ffffff !important;
    --text-secondary: #e2e8f0 !important;
    --text-muted: #94a3b8 !important;
    --text-disabled: #64748b !important;

    /* Dark Mode Border Colors */
    --border-primary: rgba(255, 255, 255, 0.1) !important;
    --border-secondary: rgba(255, 255, 255, 0.05) !important;
    --border-accent: rgba(30, 64, 175, 0.3) !important;

    /* Dark Mode Shadow Colors */
    --shadow-primary: rgba(0, 0, 0, 0.3) !important;
    --shadow-secondary: rgba(0, 0, 0, 0.2) !important;
    --shadow-green: rgba(30, 64, 175, 0.3) !important;
    --shadow-accent: rgba(249, 115, 22, 0.3) !important;

    /* Force background color change */
    background: linear-gradient(
        135deg,
        #000000 0%,
        #111111 50%,
        #1a1a1a 100%
    ) !important;
    color: #e2e8f0 !important;
}

/* Theme Variations */
.theme-cctv {
    --primary-color: var(--primary-green);
    --primary-dark: var(--primary-dark-green);
    --primary-light: var(--primary-light-green);
    --accent-color: var(--primary-accent);
    --status-color: var(--status-online);
    --status-bg: var(--status-online-bg);
    --shadow-color: var(--shadow-green);
}

.theme-vms {
    --primary-color: var(--secondary-green);
    --primary-dark: var(--secondary-dark-green);
    --primary-light: var(--secondary-light-green);
    --accent-color: var(--secondary-light-green);
    --status-color: var(--status-online);
    --status-bg: var(--status-online-bg);
    --shadow-color: var(--shadow-green);
}