/* Wandernest - Shared Global Styles */



:root {
    --color-secondary-fixed: 137 245 231; /* #89f5e7 */
    --color-on-primary-fixed-variant: 87 69 0; /* #574500 */
    --color-secondary-fixed-dim: 107 216 203; /* #6bd8cb */
    --color-primary-container: 212 175 55; /* #d4af37 */
    --color-secondary-container: 41 161 149; /* #29a195 */
    --color-primary-fixed-dim: 233 195 73; /* #e9c349 */
    --color-surface-tint: 233 195 73; /* #e9c349 */
    --color-outline-variant: 77 70 53; /* #4d4635 */
    --color-tertiary: 191 205 255; /* #bfcdff */
    --color-surface-variant: 52 53 50; /* #343532 */
    --color-on-error: 105 0 5; /* #690005 */
    --color-surface-container-low: 27 28 25; /* rgb(var(--color-surface-container-low)) */
    --color-on-tertiary-fixed: 0 23 75; /* #00174b */
    --color-outline: 153 144 124; /* #99907c */
    --color-on-tertiary: 8 43 114; /* #082b72 */
    --color-tertiary-fixed: 219 225 255; /* #dbe1ff */
    --color-surface-container: 31 32 29; /* #1f201d */
    --color-secondary: 107 216 203; /* #6bd8cb */
    --color-on-primary-container: 85 67 0; /* #554300 */
    --color-error-container: 147 0 10; /* #93000a */
    --color-surface-dim: 18 20 17; /* #121411 */
    --color-surface-container-high: 41 42 39; /* #292a27 */
    --color-inverse-surface: 227 227 222; /* #e3e3de */
    --color-background: 18 20 17; /* #121411 */
    --color-primary: 242 202 80; /* #f2ca50 */
    --color-on-secondary-fixed: 0 32 29; /* #00201d */
    --color-primary-fixed: 255 224 136; /* #ffe088 */
    --color-on-tertiary-container: 37 65 136; /* #254188 */
    --color-on-surface-variant: 208 197 175; /* #d0c5af */
    --color-on-background: 227 227 222; /* #e3e3de */
    --color-inverse-primary: 115 92 0; /* #735c00 */
    --color-surface-container-highest: 52 53 50; /* #343532 */
    --color-surface: 18 20 17; /* #121411 */
    --color-on-error-container: 255 218 214; /* #ffdad6 */
    --color-on-tertiary-fixed-variant: 39 67 138; /* #27438a */
    --color-tertiary-container: 151 176 255; /* #97b0ff */
    --color-surface-container-lowest: 13 15 12; /* #0d0f0c */
    --color-on-secondary-fixed-variant: 0 80 73; /* #005049 */
    --color-on-primary-fixed: 36 26 0; /* #241a00 */
    --color-on-primary: 60 47 0; /* #3c2f00 */
    --color-on-surface: 227 227 222; /* #e3e3de */
    --color-error: 255 180 171; /* #ffb4ab */
    --color-tertiary-fixed-dim: 180 197 255; /* #b4c5ff */
    --color-on-secondary: 0 55 50; /* #003732 */
    --color-inverse-on-surface: 48 49 46; /* #30312e */
    --color-on-secondary-container: 0 48 43; /* #00302b */
    --color-surface-bright: 56 58 54; /* #383a36 */
    color-scheme: dark;
}

:root[data-theme="light"] {
    --color-secondary-fixed: 137 245 231; /* #89f5e7 */
    --color-on-primary-fixed-variant: 87 69 0; /* #574500 */
    --color-secondary-fixed-dim: 107 216 203; /* #6bd8cb */
    --color-primary-container: 224 11 65;
    --color-secondary-container: 41 161 149; /* #29a195 */
    --color-primary-fixed-dim: 233 195 73; /* #e9c349 */
    --color-surface-tint: 233 195 73; /* #e9c349 */
    --color-outline-variant: 193 193 193;
    --color-tertiary: 191 205 255; /* #bfcdff */
    --color-surface-variant: 235 235 235;
    --color-on-error: 105 0 5; /* #690005 */
    --color-surface-container-low: 240 240 240;
    --color-on-tertiary-fixed: 0 23 75; /* #00174b */
    --color-outline: 153 144 124; /* #99907c */
    --color-on-tertiary: 8 43 114; /* #082b72 */
    --color-tertiary-fixed: 219 225 255; /* #dbe1ff */
    --color-surface-container: 230 230 230;
    --color-secondary: 0 106 96;
    --color-on-primary-container: 255 255 255;
    --color-error-container: 147 0 10; /* #93000a */
    --color-surface-dim: 245 245 245;
    --color-surface-container-high: 220 220 220;
    --color-inverse-surface: 34 34 34;
    --color-background: 255 255 255;
    --color-primary: 255 56 92;
    --color-on-secondary-fixed: 0 32 29; /* #00201d */
    --color-primary-fixed: 255 224 136; /* #ffe088 */
    --color-on-tertiary-container: 37 65 136; /* #254188 */
    --color-on-surface-variant: 63 63 63;
    --color-on-background: 34 34 34;
    --color-inverse-primary: 115 92 0; /* #735c00 */
    --color-surface-container-highest: 210 210 210;
    --color-surface: 255 255 255;
    --color-on-error-container: 255 218 214; /* #ffdad6 */
    --color-on-tertiary-fixed-variant: 39 67 138; /* #27438a */
    --color-tertiary-container: 151 176 255; /* #97b0ff */
    --color-surface-container-lowest: 247 247 247;
    --color-on-secondary-fixed-variant: 0 80 73; /* #005049 */
    --color-on-primary-fixed: 36 26 0; /* #241a00 */
    --color-on-primary: 255 255 255;
    --color-on-surface: 34 34 34;
    --color-error: 255 180 171; /* #ffb4ab */
    --color-tertiary-fixed-dim: 180 197 255; /* #b4c5ff */
    --color-on-secondary: 0 55 50; /* #003732 */
    --color-inverse-on-surface: 227 227 222;
    --color-on-secondary-container: 0 48 43; /* #00302b */
    --color-surface-bright: 250 250 250;
    color-scheme: light;
}


:root {
    --primary: rgb(var(--color-primary));
    --background: rgb(var(--color-background));
    --surface: rgb(var(--color-surface));
    --on-surface: rgb(var(--color-on-surface));
}

:root[data-theme="light"] {
    --primary: rgb(var(--color-primary));
    --background: rgb(var(--color-background));
    --surface: rgb(var(--color-surface));
    --on-surface: rgb(var(--color-on-surface));
}


/* Material Symbols configuration */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

/* Glassmorphism Panels */
.glass-panel {
    background: rgb(var(--color-surface-container) / 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgb(var(--color-outline-variant) / 0.2);
}

.glass-card {
    background: rgb(var(--color-surface-variant) / 0.3);
    backdrop-filter: blur(10px);
    border: 1px solid rgb(var(--color-outline-variant) / 0.1);
    transition: all 0.3s ease;
}

.glass-card:hover {
    background: rgb(var(--color-surface-variant) / 0.5);
    border-color: rgb(var(--color-primary) / 0.2);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--background);
}

::-webkit-scrollbar-thumb {
    background: rgb(var(--color-primary) / 0.2);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--color-primary) / 0.4);
}

/* Utilities */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}

/* Prevent Tailwind forms plugin from turning inputs white by default */
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select {
    background-color: rgb(var(--color-background) / 0.6) !important;
    box-shadow: inset 0 0 0px 1000px rgb(var(--color-background) / 0.6) !important;
}

.glass-input {
    background-color: transparent !important;
    box-shadow: none !important;
}

.otp-input,
input[placeholder="000000"] {
    background-color: rgb(var(--color-surface-container-low)) !important;
    box-shadow: inset 0 0 0px 1000px rgb(var(--color-surface-container-low)) !important;
}

/* Prevent Tailwind forms plugin from turning focused inputs white and set active border to --primary */
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus {
    background-color: rgb(var(--color-background) / 0.6) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 1px var(--primary), inset 0 0 0px 1000px rgb(var(--color-background) / 0.6) !important;
    outline: none !important;
}

.glass-input:focus {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 1px var(--primary) !important;
}

/* Prevent browser autocomplete/autofill from overriding our transparent styles */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 600000s ease-in-out 0s !important;
    -webkit-text-fill-color: rgb(var(--color-on-surface)) !important;
    caret-color: rgb(var(--color-on-surface)) !important;
    box-shadow: inset 0 0 0px 1000px rgb(var(--color-background) / 0.6) !important;
}

input:-webkit-autofill:focus {
    box-shadow: 0 0 0 1px var(--primary), inset 0 0 0px 1000px rgb(var(--color-background) / 0.6) !important;
}