/* Color Palette System - Neutral & Professional */

:root {
    /* Primary Color Palette */
    --color-bg-main: #F7F7F7;              /* Soft off-white - main background */
    --color-text-primary: #212121;          /* Charcoal gray - main text */
    --color-bg-secondary: #E0E0E0;          /* Light gray - cards, inputs, sections */
    --color-accent: #3E2723;                /* Dark brown - buttons, CTAs, highlights */
    --color-text-muted: #9E9E9E;            /* Mid gray - placeholders, borders, dividers */
    
    /* Additional Neutral Colors */
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-bg-card: #FFFFFF;               /* Pure white for cards */
    --color-border: #9E9E9E;                /* Border color */
    --color-border-light: #E0E0E0;          /* Light border */
    --color-shadow: rgba(33, 33, 33, 0.1);  /* Subtle shadows */
    
    /* Interactive States */
    --color-accent-hover: #5D4037;          /* Darker brown for hover */
    --color-accent-light: rgba(62, 39, 35, 0.1);  /* Light accent for backgrounds */
    --color-focus: rgba(62, 39, 35, 0.25);  /* Focus states */
    
    /* Text Variations */
    --color-text-secondary: #757575;        /* Secondary text */
    --color-text-disabled: #BDBDBD;         /* Disabled text */
    --color-text-white: #FFFFFF;            /* White text for dark backgrounds */
    
    /* Background Variations */
    --color-bg-disabled: #F5F5F5;           /* Disabled backgrounds */
    --color-bg-hover: #FAFAFA;              /* Hover backgrounds */
    --color-bg-pressed: #EEEEEE;            /* Pressed/active backgrounds */
}

/* Background Color Classes */
.bg-main { background-color: var(--color-bg-main); }
.bg-secondary { background-color: var(--color-bg-secondary); }
.bg-white { background-color: var(--color-white); }
.bg-card { background-color: var(--color-bg-card); }
.bg-accent { background-color: var(--color-accent); }
.bg-accent-light { background-color: var(--color-accent-light); }
.bg-hover { background-color: var(--color-bg-hover); }
.bg-disabled { background-color: var(--color-bg-disabled); }

/* Text Color Classes */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-disabled { color: var(--color-text-disabled); }
.text-white { color: var(--color-text-white); }
.text-accent { color: var(--color-accent); }

/* Border Color Classes */
.border-default { border-color: var(--color-border); }
.border-light { border-color: var(--color-border-light); }
.border-accent { border-color: var(--color-accent); }
.border-muted { border-color: var(--color-text-muted); }

/* Button Classes */
.btn-accent {
    background-color: var(--color-accent);
    color: var(--color-text-white);
    border: 1px solid var(--color-accent);
    transition: all 0.3s ease;
}

.btn-accent:hover {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--color-text-white);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px var(--color-shadow);
}

.btn-accent:focus {
    box-shadow: 0 0 0 0.2rem var(--color-focus);
    outline: none;
}

.btn-outline-accent {
    background-color: transparent;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    transition: all 0.3s ease;
}

.btn-outline-accent:hover {
    background-color: var(--color-accent);
    color: var(--color-text-white);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px var(--color-shadow);
}

.btn-neutral {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-light);
    transition: all 0.3s ease;
}

.btn-neutral:hover {
    background-color: var(--color-bg-pressed);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

/* Card Classes */
.card-neutral {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    box-shadow: 0 2px 8px var(--color-shadow);
    transition: all 0.3s ease;
}

.card-neutral:hover {
    box-shadow: 0 4px 16px var(--color-shadow);
    transform: translateY(-2px);
}

.card-secondary {
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
}

/* Form Classes */
.form-control-neutral {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    color: var(--color-text-primary);
    transition: all 0.3s ease;
}

.form-control-neutral:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 0.2rem var(--color-focus);
    outline: none;
}

.form-control-neutral::placeholder {
    color: var(--color-text-muted);
}

/* Navigation Classes */
.navbar-neutral {
    background-color: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border-light);
    box-shadow: 0 2px 8px var(--color-shadow);
}

.nav-link-neutral {
    color: var(--color-text-primary);
    transition: all 0.3s ease;
}

.nav-link-neutral:hover {
    color: var(--color-accent);
    background-color: var(--color-bg-hover);
}

.nav-link-neutral.active {
    color: var(--color-accent);
    background-color: var(--color-accent-light);
}

/* Dropdown Classes */
.dropdown-menu-neutral {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    box-shadow: 0 8px 24px var(--color-shadow);
    border-radius: 8px;
}

.dropdown-item-neutral {
    color: var(--color-text-primary);
    transition: all 0.3s ease;
}

.dropdown-item-neutral:hover {
    background-color: var(--color-accent-light);
    color: var(--color-accent);
}

/* Alert/Status Classes */
.alert-neutral {
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border-light);
    color: var(--color-text-primary);
}

/* Utility Classes */
.shadow-neutral {
    box-shadow: 0 2px 8px var(--color-shadow);
}

.shadow-neutral-lg {
    box-shadow: 0 4px 16px var(--color-shadow);
}

.shadow-neutral-xl {
    box-shadow: 0 8px 24px var(--color-shadow);
}

/* Focus States */
.focus-accent:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem var(--color-focus);
    border-color: var(--color-accent);
}

/* Hover States */
.hover-lift:hover {
    transform: translateY(-2px);
    transition: transform 0.3s ease;
}

.hover-shadow:hover {
    box-shadow: 0 4px 16px var(--color-shadow);
    transition: box-shadow 0.3s ease;
}

/* Divider */
.divider-neutral {
    border-color: var(--color-border-light);
}

/* Status Indicators (subtle) */
.status-success { 
    background-color: #E8F5E8; 
    color: #2E7D32; 
    border-color: #C8E6C9;
}

.status-warning { 
    background-color: #FFF8E1; 
    color: #F57C00; 
    border-color: #FFE0B2;
}

.status-error { 
    background-color: #FFEBEE; 
    color: #C62828; 
    border-color: #FFCDD2;
}

.status-info { 
    background-color: #E3F2FD; 
    color: #1565C0; 
    border-color: #BBDEFB;
}