:root {
    color-scheme: light;

    --color-inverse-on-surface: 48 48 48;
    --color-outline-variant: 203 213 225;
    --color-on-secondary-fixed-variant: 87 69 0;
    --color-tertiary-fixed: 255 224 136;
    --color-surface-tint: 11 61 46;
    --color-error-container: 255 218 214;
    --color-secondary-container: 253 230 138;
    --color-on-tertiary-fixed: 36 26 0;
    --color-on-tertiary: 60 47 0;
    --color-secondary-fixed: 255 224 136;
    --color-on-primary: 255 255 255;
    --color-on-primary-container: 11 61 46;
    --color-surface-container: 248 250 252;
    --color-on-tertiary-container: 78 61 0;
    --color-primary: 11 61 46;
    --color-primary-fixed-dim: 11 61 46;
    --color-background: 255 255 255;
    --color-on-secondary-container: 11 61 46;
    --color-surface-variant: 238 242 240;
    --color-tertiary-fixed-dim: 212 175 55;
    --color-on-primary-fixed: 0 33 22;
    --color-surface-container-lowest: 255 255 255;
    --color-on-tertiary-fixed-variant: 87 69 0;
    --color-on-secondary: 11 61 46;
    --color-surface-container-high: 241 245 249;
    --color-surface: 255 255 255;
    --color-surface-container-low: 248 250 252;
    --color-on-error-container: 147 0 10;
    --color-secondary: 212 175 55;
    --color-error: 185 28 28;
    --color-surface-bright: 255 255 255;
    --color-surface-dim: 248 250 252;
    --color-on-background: 11 61 46;
    --color-on-secondary-fixed: 36 26 0;
    --color-inverse-primary: 57 103 86;
    --color-on-surface: 11 61 46;
    --color-tertiary-container: 253 230 138;
    --color-on-error: 255 255 255;
    --color-outline: 226 232 240;
    --color-surface-container-highest: 226 232 240;
    --color-on-surface-variant: 71 85 105;
    --color-on-primary-fixed-variant: 33 79 63;
    --color-secondary-fixed-dim: 212 175 55;
    --color-primary-fixed: 240 253 244;
    --color-inverse-surface: 226 232 240;
    --color-primary-container: 240 253 244;
    --color-tertiary: 212 175 55;

    --glass-nav-bg: 255 255 255;
    --glass-nav-alpha: 0.8;
    --glass-panel-bg: 255 255 255;
    --glass-panel-alpha: 0.8;
    --gold-gradient-start: 212 175 55;
    --gold-gradient-end: 184 134 11;
}

html.dark {
    color-scheme: dark;

    --color-inverse-on-surface: 48 48 48;
    --color-outline-variant: 65 73 68;
    --color-on-secondary-fixed-variant: 87 69 0;
    --color-tertiary-fixed: 255 224 136;
    --color-surface-tint: 160 209 188;
    --color-error-container: 147 0 10;
    --color-secondary-container: 175 141 17;
    --color-on-tertiary-fixed: 36 26 0;
    --color-on-tertiary: 60 47 0;
    --color-secondary-fixed: 255 224 136;
    --color-on-primary: 4 56 41;
    --color-on-primary-container: 121 168 148;
    --color-surface-container: 31 31 31;
    --color-on-tertiary-container: 78 61 0;
    --color-primary: 160 209 188;
    --color-primary-fixed-dim: 160 209 188;
    --color-background: 19 19 19;
    --color-on-secondary-container: 52 40 0;
    --color-surface-variant: 53 53 53;
    --color-tertiary-fixed-dim: 233 195 73;
    --color-on-primary-fixed: 0 33 22;
    --color-surface-container-lowest: 14 14 14;
    --color-on-tertiary-fixed-variant: 87 69 0;
    --color-on-secondary: 60 47 0;
    --color-surface-container-high: 42 42 42;
    --color-surface: 19 19 19;
    --color-surface-container-low: 27 27 27;
    --color-on-error-container: 255 218 214;
    --color-secondary: 233 195 73;
    --color-error: 255 180 171;
    --color-surface-bright: 57 57 57;
    --color-surface-dim: 19 19 19;
    --color-on-background: 226 226 226;
    --color-on-secondary-fixed: 36 26 0;
    --color-inverse-primary: 57 103 86;
    --color-on-surface: 226 226 226;
    --color-tertiary-container: 203 167 47;
    --color-on-error: 105 0 5;
    --color-outline: 138 147 141;
    --color-surface-container-highest: 53 53 53;
    --color-on-surface-variant: 192 200 195;
    --color-on-primary-fixed-variant: 33 79 63;
    --color-secondary-fixed-dim: 233 195 73;
    --color-primary-fixed: 188 237 215;
    --color-inverse-surface: 226 226 226;
    --color-primary-container: 11 61 46;
    --color-tertiary: 233 195 73;

    --glass-nav-bg: 19 19 19;
    --glass-nav-alpha: 0.6;
    --glass-panel-bg: 53 53 53;
    --glass-panel-alpha: 0.6;
    --gold-gradient-start: 233 195 73;
    --gold-gradient-end: 175 141 17;
}

.material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
}

.glass-nav {
    background: rgb(var(--glass-nav-bg) / var(--glass-nav-alpha));
    backdrop-filter: blur(20px);
}

.glass-panel {
    background: rgb(var(--glass-panel-bg) / var(--glass-panel-alpha));
    backdrop-filter: blur(20px);
}

.industrial-grid {
    background-image: radial-gradient(circle at 2px 2px, rgb(var(--color-outline-variant) / 0.15) 1px, transparent 0);
    background-size: 40px 40px;
}

.hero-gradient {
    background: linear-gradient(165deg, rgb(var(--color-primary-container)) 0%, rgb(var(--color-background)) 100%);
}

.gold-gradient {
    background: linear-gradient(to bottom right, rgb(var(--gold-gradient-start)), rgb(var(--gold-gradient-end)));
}

html:not(.dark) .text-outline {
    --tw-text-opacity: 1;
    color: rgb(27 29 31 / var(--tw-text-opacity));
}