/* ============================================================
   CSS VARIABLES & THEMING
   ============================================================ */
:root {
    --background: 246 250 254;
    --surface: 246 250 254;
    --on-surface: 23 28 31;
    --primary: 14 59 105;
    --primary-container: 212 227 255;
    --on-primary: 255 255 255;
    --secondary: 80 95 118;
    --secondary-container: 211 228 254;
    --on-secondary-container: 16 28 45;
    --surface-container-lowest: 255 255 255;
    --surface-container-low: 240 244 248;
    --surface-container: 234 238 242;
    --surface-container-high: 228 233 237;
    --surface-container-highest: 223 227 231;
    --outline: 115 119 128;
    --on-surface-variant: 67 71 79;
    --tertiary: 0 66 61;
    --tertiary-container: 131 253 244;
    --error: 186 26 26;
    --on-error: 255 255 255;
    --glass-bg: rgba(255, 255, 255, 0.7);

    /* Fixed semantic palette */
    --red-50: 254 242 242;
    --red-100: 254 226 226;
    --red-200: 254 202 202;
    --red-400: 248 113 113;
    --red-500: 239 68 68;
    --red-600: 220 38 38;
    --red-700: 185 28 28;
    --green-50: 240 253 244;
    --green-100: 220 252 231;
    --green-400: 74 222 128;
    --green-500: 34 197 94;
    --green-600: 22 163 74;
    --green-700: 21 128 61;
    --orange-50: 255 247 237;
    --orange-100: 255 237 213;
    --orange-200: 254 215 170;
    --orange-400: 251 146 60;
    --orange-500: 249 115 22;
    --orange-600: 234 88 12;
    --orange-700: 194 65 12;
    --emerald-50: 236 253 245;
    --emerald-100: 209 250 229;
    --emerald-200: 167 243 208;
    --emerald-400: 52 211 153;
    --emerald-500: 16 185 129;
    --emerald-600: 5 150 105;
    --emerald-700: 4 120 87;
    --blue-100: 219 234 254;
    --blue-200: 191 219 254;
    --blue-700: 29 78 216;
    --blue-900: 30 58 138;
    --slate-600: 71 85 105;
    --slate-700: 51 65 85;
    --slate-800: 30 41 59;
    --slate-900: 15 23 42;
}

.dark {
    --background: 15 23 42;
    --surface: 15 23 42;
    --on-surface: 241 245 249;
    --primary: 165 200 255;
    --primary-container: 30 58 95;
    --on-primary: 0 48 97;
    --secondary: 183 200 225;
    --secondary-container: 61 74 93;
    --on-secondary-container: 211 228 254;
    --surface-container-lowest: 10 15 29;
    --surface-container-low: 30 41 59;
    --surface-container: 51 65 85;
    --surface-container-high: 71 85 105;
    --surface-container-highest: 100 116 139;
    --outline: 148 163 184;
    --on-surface-variant: 203 213 225;
    --tertiary: 113 216 190;
    --tertiary-container: 0 80 74;
    --error: 255 180 171;
    --on-error: 105 0 5;
    --glass-bg: rgba(15, 23, 42, 0.7);

    /* Dark mode palette overrides */
    --emerald-400: 52 211 153;
    --orange-400: 251 146 60;
}

/* ============================================================
   BASE RESET & GLOBAL STYLES
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: rgb(var(--background));
    color: rgb(var(--on-surface));
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Manrope', sans-serif;
    margin: 0;
}

p {
    margin: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    font-family: inherit;
    cursor: pointer;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
}

/* ============================================================
   MATERIAL SYMBOLS
   ============================================================ */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ============================================================
   UTILITY
   ============================================================ */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
}

.signature-gradient {
    background: linear-gradient(135deg, #0e3b69 0%, #2c5282 100%);
}

/* ============================================================
   FLASH MESSAGES
   ============================================================ */
.flash-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.flash-msg {
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    font-size: 0.875rem;
    font-weight: 600;
    border: 1px solid;
}

.flash-msg--error {
    background-color: rgb(var(--red-100));
    color: rgb(var(--red-700));
    border-color: rgb(var(--red-200));
}

.flash-msg--success {
    background-color: rgb(var(--emerald-100));
    color: rgb(var(--emerald-700));
    border-color: rgb(var(--emerald-200));
}

.flash-msg--info {
    background-color: rgb(var(--blue-100));
    color: rgb(var(--blue-700));
    border-color: rgb(var(--blue-200));
}

/* ============================================================
   CUSTOM SCROLLBAR
   ============================================================ */
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgb(var(--outline) / 0.3);
    border-radius: 9999px;
}