/* ============================================
   ANB Build Estimator - Light Theme
   ============================================ */

:root {
    /* ----- Primary Colors ----- */
    --primary-color: #2563eb;
    --primary-hover: #1d4ed8;
    --primary-color-light: #dbeafe;
    --primary-color-alpha: rgba(37, 99, 235, 0.2);
    
    /* ----- Secondary Colors ----- */
    --secondary-color: #64748b;
    --secondary-hover: #475569;
    --secondary-color-light: #f1f5f9;
    
    /* ----- Status Colors ----- */
    --success-color: #16a34a;
    --success-hover: #15803d;
    --success-color-light: #dcfce7;
    
    --warning-color: #d97706;
    --warning-hover: #b45309;
    --warning-color-light: #fef3c7;
    
    --danger-color: #dc2626;
    --danger-hover: #b91c1c;
    --danger-color-light: #fee2e2;
    --danger-color-alpha: rgba(220, 38, 38, 0.2);
    
    /* ----- Background Colors ----- */
    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    
    /* ----- Text Colors ----- */
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --text-heading: #0f172a;
    
    /* ----- Link Colors ----- */
    --link-color: #2563eb;
    --link-hover: #1d4ed8;
    
    /* ----- Border Colors ----- */
    --border-color: #e2e8f0;
    
    /* ----- Sidebar ----- */
    --sidebar-bg: #ffffff;
    --nav-hover-bg: #f1f5f9;
    --nav-active-bg: #eff6ff;
    --submenu-bg: #f8fafc;
    
    /* ----- Header ----- */
    --header-bg: #ffffff;
    
    /* ----- Cards ----- */
    --card-bg: #ffffff;
    --card-border: #e2e8f0;
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
    --card-hover-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    
    /* ----- Forms ----- */
    --input-bg: #ffffff;
    --input-border: #cbd5e1;
    --input-addon-bg: #f1f5f9;
    
    /* ----- Tables ----- */
    --table-border: #e2e8f0;
    --table-header-bg: #f8fafc;
    --table-row-bg: #ffffff;
    --table-row-alt: #f8fafc;
    --table-row-hover: #f1f5f9;
    
    /* ----- Modal ----- */
    --modal-bg: #ffffff;
    --modal-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* ----- Dropdown ----- */
    --dropdown-bg: #ffffff;
    --dropdown-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    
    /* ----- Tooltip ----- */
    --tooltip-bg: #1e293b;
    --tooltip-text: #ffffff;
    
    /* ----- Skeleton Loading ----- */
    --skeleton-base: #e2e8f0;
    --skeleton-highlight: #f1f5f9;
    
    /* ----- Theme Toggle ----- */
    --toggle-bg: #f1f5f9;
    
    /* ----- Scrollbar ----- */
    --scrollbar-track: #f1f5f9;
    --scrollbar-thumb: #cbd5e1;
    --scrollbar-thumb-hover: #94a3b8;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* Selection */
::selection {
    background-color: var(--primary-color);
    color: white;
}

/* Focus visible for accessibility */
:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}