/* ==================== Color System - Professional Blue Palette ==================== */
:root {
    /* Base Color Palette */
    --color-primary: #003366;
    --color-primary-variant: #0055AA;
    --color-accent: #0077CC;
    --color-background: #F5F5F5;
    --color-surface: #FFFFFF;
    --color-text: #333333;
    --color-text-secondary: #777777;
    --color-muted: #EEEEEE;
    --color-success: #2E8A3A;
    --color-warning: #E0A800;
    --color-danger: #D9534F;
    --color-border: #DDDDDD;
    
    /* Computed Colors */
    --color-accent-hover: #0055AA;
    --color-accent-dark: #0055AA;
    --color-sidebar-bg: #002244;
    --color-sidebar-active: #0077CC;
}

/* ==================== UI Element Colors ==================== */
.navbar, .page-header {
    background: var(--color-primary);
    color: #FFFFFF;
}

.sidebar {
    background: var(--color-sidebar-bg);
    color: #FFFFFF;
    float: right;
}

.sidebar .active {
    background: var(--color-sidebar-active);
}

.btn-primary {
    background: var(--color-accent);
    color: #FFFFFF;
    border: none;
}

.btn-primary:hover {
    background: var(--color-primary-variant);
}

.btn-secondary {
    border: 1px solid var(--color-border);
    color: var(--color-text);
    background: transparent;
}

a {
    color: var(--color-accent);
}

a:hover {
    color: var(--color-accent-dark);
}

.card, .feature-card, .ticket-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

body {
    background: var(--color-background);
    color: var(--color-text);
}

input, textarea, select {
    background: #FFFFFF;
    border: 1px solid var(--color-border);
}

input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--color-accent);
}

.badge-success { background: var(--color-success); color: #FFFFFF; }
.badge-warning { background: var(--color-warning); color: #FFFFFF; }
.badge-danger { background: var(--color-danger); color: #FFFFFF; }