/* Material Design 3 semantic tokens — tema2
   Light values match public/tema2/js/tailwind-config.js (do not change).
   Dark surfaces: M3 steps. Brand primary stays #f97316 in both schemes. */

html.light {
    color-scheme: light;
}

html.dark {
    color-scheme: dark;
}

:root,
html.light {
    --md-sys-color-error: #b41340;
    --md-sys-color-error-rgb: 180 19 64;
    --md-sys-color-on-secondary-fixed-variant: #533ea7;
    --md-sys-color-on-secondary-fixed-variant-rgb: 83 62 167;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-on-primary-rgb: 255 255 255;
    --md-sys-color-surface-dim: #d0d5d8;
    --md-sys-color-surface-dim-rgb: 208 213 216;
    --md-sys-color-tertiary-dim: #882a69;
    --md-sys-color-tertiary-dim-rgb: 136 42 105;
    --md-sys-color-tertiary-fixed: #ff8ed2;
    --md-sys-color-tertiary-fixed-rgb: 255 142 210;
    --md-sys-color-on-background: #2c2f31;
    --md-sys-color-on-background-rgb: 44 47 49;
    --md-sys-color-primary-fixed-dim: #ffb088;
    --md-sys-color-primary-fixed-dim-rgb: 255 176 136;
    --md-sys-color-on-tertiary-fixed-variant: #6e1354;
    --md-sys-color-on-tertiary-fixed-variant-rgb: 110 19 84;
    --md-sys-color-surface-container-highest: #d9dde0;
    --md-sys-color-surface-container-highest-rgb: 217 221 224;
    --md-sys-color-on-surface: #2c2f31;
    --md-sys-color-on-surface-rgb: 44 47 49;
    --md-sys-color-on-primary-fixed-variant: #7a3100;
    --md-sys-color-on-primary-fixed-variant-rgb: 122 49 0;
    --md-sys-color-secondary: #5e4ab3;
    --md-sys-color-secondary-rgb: 94 74 179;
    --md-sys-color-inverse-primary: #ff9d5c;
    --md-sys-color-inverse-primary-rgb: 255 157 92;
    --md-sys-color-surface-container: #e5e9eb;
    --md-sys-color-surface-container-rgb: 229 233 235;
    --md-sys-color-on-error: #ffefef;
    --md-sys-color-on-error-rgb: 255 239 239;
    --md-sys-color-primary: #f97316;
    --md-sys-color-primary-rgb: 249 115 22;
    --md-sys-color-on-secondary-fixed: #361c89;
    --md-sys-color-on-secondary-fixed-rgb: 54 28 137;
    --md-sys-color-surface-variant: #d9dde0;
    --md-sys-color-surface-variant-rgb: 217 221 224;
    --md-sys-color-tertiary: #963776;
    --md-sys-color-tertiary-rgb: 150 55 118;
    --md-sys-color-surface-container-high: #dfe3e6;
    --md-sys-color-surface-container-high-rgb: 223 227 230;
    --md-sys-color-secondary-container: #d6cbff;
    --md-sys-color-secondary-container-rgb: 214 203 255;
    --md-sys-color-inverse-on-surface: #9a9d9f;
    --md-sys-color-inverse-on-surface-rgb: 154 157 159;
    --md-sys-color-error-dim: #a70138;
    --md-sys-color-error-dim-rgb: 167 1 56;
    --md-sys-color-outline: #747779;
    --md-sys-color-outline-rgb: 116 119 121;
    --md-sys-color-on-secondary-container: #4a349d;
    --md-sys-color-on-secondary-container-rgb: 74 52 157;
    --md-sys-color-error-container: #f74b6d;
    --md-sys-color-error-container-rgb: 247 75 109;
    --md-sys-color-background: #ffffff;
    --md-sys-color-background-rgb: 255 255 255;
    --md-sys-color-tertiary-fixed-dim: #ef81c4;
    --md-sys-color-tertiary-fixed-dim-rgb: 239 129 196;
    --md-sys-color-secondary-fixed-dim: #c8bbff;
    --md-sys-color-secondary-fixed-dim-rgb: 200 187 255;
    --md-sys-color-secondary-fixed: #d6cbff;
    --md-sys-color-secondary-fixed-rgb: 214 203 255;
    --md-sys-color-on-primary-container: #4e1d00;
    --md-sys-color-on-primary-container-rgb: 78 29 0;
    --md-sys-color-on-primary-fixed: #000000;
    --md-sys-color-on-primary-fixed-rgb: 0 0 0;
    --md-sys-color-primary-fixed: #ffdbc7;
    --md-sys-color-primary-fixed-rgb: 255 219 199;
    --md-sys-color-primary-dim: #e65d00;
    --md-sys-color-primary-dim-rgb: 230 93 0;
    --md-sys-color-outline-variant: #abadaf;
    --md-sys-color-outline-variant-rgb: 171 173 175;
    --md-sys-color-on-tertiary: #ffeef4;
    --md-sys-color-on-tertiary-rgb: 255 238 244;
    --md-sys-color-tertiary-container: #ff8ed2;
    --md-sys-color-tertiary-container-rgb: 255 142 210;
    --md-sys-color-surface-bright: #ffffff;
    --md-sys-color-surface-bright-rgb: 255 255 255;
    --md-sys-color-surface-tint: #f97316;
    --md-sys-color-surface-tint-rgb: 249 115 22;
    --md-sys-color-on-tertiary-fixed: #3b002b;
    --md-sys-color-on-tertiary-fixed-rgb: 59 0 43;
    --md-sys-color-secondary-dim: #523da6;
    --md-sys-color-secondary-dim-rgb: 82 61 166;
    --md-sys-color-primary-container: #ffdbc7;
    --md-sys-color-primary-container-rgb: 255 219 199;
    --md-sys-color-on-surface-variant: #595c5e;
    --md-sys-color-on-surface-variant-rgb: 89 92 94;
    --md-sys-color-on-error-container: #510017;
    --md-sys-color-on-error-container-rgb: 81 0 23;
    --md-sys-color-surface: #ffffff;
    --md-sys-color-surface-rgb: 255 255 255;
    --md-sys-color-on-tertiary-container: #63054a;
    --md-sys-color-on-tertiary-container-rgb: 99 5 74;
    --md-sys-color-inverse-surface: #0b0f10;
    --md-sys-color-inverse-surface-rgb: 11 15 16;
    --md-sys-color-surface-container-low: #ffffff;
    --md-sys-color-surface-container-low-rgb: 255 255 255;
    --md-sys-color-surface-container-lowest: #ffffff;
    --md-sys-color-surface-container-lowest-rgb: 255 255 255;
    --md-sys-color-on-secondary: #f6f0ff;
    --md-sys-color-on-secondary-rgb: 246 240 255;
}

html.dark {
    --md-sys-color-primary: #f97316;
    --md-sys-color-primary-rgb: 249 115 22;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-on-primary-rgb: 255 255 255;
    --md-sys-color-primary-container: #7a3100;
    --md-sys-color-primary-container-rgb: 122 49 0;
    --md-sys-color-on-primary-container: #ffdbc7;
    --md-sys-color-on-primary-container-rgb: 255 219 199;
    --md-sys-color-primary-dim: #e65d00;
    --md-sys-color-primary-dim-rgb: 230 93 0;
    --md-sys-color-surface-tint: #f97316;
    --md-sys-color-surface-tint-rgb: 249 115 22;
    --md-sys-color-primary-fixed: #ffdbc7;
    --md-sys-color-primary-fixed-rgb: 255 219 199;
    --md-sys-color-primary-fixed-dim: #f97316;
    --md-sys-color-primary-fixed-dim-rgb: 249 115 22;
    --md-sys-color-on-primary-fixed: #000000;
    --md-sys-color-on-primary-fixed-rgb: 0 0 0;
    --md-sys-color-on-primary-fixed-variant: #7a3100;
    --md-sys-color-on-primary-fixed-variant-rgb: 122 49 0;

    --md-sys-color-secondary: #c8bbff;
    --md-sys-color-secondary-rgb: 200 187 255;
    --md-sys-color-on-secondary: #2f1d82;
    --md-sys-color-on-secondary-rgb: 47 29 130;
    --md-sys-color-secondary-container: #46349c;
    --md-sys-color-secondary-container-rgb: 70 52 156;
    --md-sys-color-on-secondary-container: #d6cbff;
    --md-sys-color-on-secondary-container-rgb: 214 203 255;
    --md-sys-color-secondary-dim: #b8a9f5;
    --md-sys-color-secondary-dim-rgb: 184 169 245;
    --md-sys-color-secondary-fixed: #d6cbff;
    --md-sys-color-secondary-fixed-rgb: 214 203 255;
    --md-sys-color-secondary-fixed-dim: #c8bbff;
    --md-sys-color-secondary-fixed-dim-rgb: 200 187 255;
    --md-sys-color-on-secondary-fixed: #361c89;
    --md-sys-color-on-secondary-fixed-rgb: 54 28 137;
    --md-sys-color-on-secondary-fixed-variant: #533ea7;
    --md-sys-color-on-secondary-fixed-variant-rgb: 83 62 167;

    --md-sys-color-tertiary: #ef81c4;
    --md-sys-color-tertiary-rgb: 239 129 196;
    --md-sys-color-on-tertiary: #5c0a48;
    --md-sys-color-on-tertiary-rgb: 92 10 72;
    --md-sys-color-tertiary-container: #79285e;
    --md-sys-color-tertiary-container-rgb: 121 40 94;
    --md-sys-color-on-tertiary-container: #ffd8ec;
    --md-sys-color-on-tertiary-container-rgb: 255 216 236;
    --md-sys-color-tertiary-dim: #d86aad;
    --md-sys-color-tertiary-dim-rgb: 216 106 173;
    --md-sys-color-tertiary-fixed: #ff8ed2;
    --md-sys-color-tertiary-fixed-rgb: 255 142 210;
    --md-sys-color-tertiary-fixed-dim: #ef81c4;
    --md-sys-color-tertiary-fixed-dim-rgb: 239 129 196;
    --md-sys-color-on-tertiary-fixed: #3b002b;
    --md-sys-color-on-tertiary-fixed-rgb: 59 0 43;
    --md-sys-color-on-tertiary-fixed-variant: #6e1354;
    --md-sys-color-on-tertiary-fixed-variant-rgb: 110 19 84;

    --md-sys-color-error: #ffb2b8;
    --md-sys-color-error-rgb: 255 178 184;
    --md-sys-color-on-error: #69001c;
    --md-sys-color-on-error-rgb: 105 0 28;
    --md-sys-color-error-dim: #ff8a94;
    --md-sys-color-error-dim-rgb: 255 138 148;
    --md-sys-color-error-container: #93002a;
    --md-sys-color-error-container-rgb: 147 0 42;
    --md-sys-color-on-error-container: #ffdadc;
    --md-sys-color-on-error-container-rgb: 255 218 220;

    --md-sys-color-background: #111416;
    --md-sys-color-background-rgb: 17 20 22;
    --md-sys-color-on-background: #e1e3e5;
    --md-sys-color-on-background-rgb: 225 227 229;
    --md-sys-color-surface: #111416;
    --md-sys-color-surface-rgb: 17 20 22;
    --md-sys-color-on-surface: #e1e3e5;
    --md-sys-color-on-surface-rgb: 225 227 229;
    --md-sys-color-surface-dim: #111416;
    --md-sys-color-surface-dim-rgb: 17 20 22;
    --md-sys-color-surface-bright: #37393c;
    --md-sys-color-surface-bright-rgb: 55 57 60;
    --md-sys-color-surface-container-lowest: #0c0e10;
    --md-sys-color-surface-container-lowest-rgb: 12 14 16;
    --md-sys-color-surface-container-low: #1a1c1e;
    --md-sys-color-surface-container-low-rgb: 26 28 30;
    --md-sys-color-surface-container: #1e2022;
    --md-sys-color-surface-container-rgb: 30 32 34;
    --md-sys-color-surface-container-high: #282a2c;
    --md-sys-color-surface-container-high-rgb: 40 42 44;
    --md-sys-color-surface-container-highest: #333537;
    --md-sys-color-surface-container-highest-rgb: 51 53 55;
    --md-sys-color-surface-variant: #43474a;
    --md-sys-color-surface-variant-rgb: 67 71 74;
    --md-sys-color-on-surface-variant: #c3c7ca;
    --md-sys-color-on-surface-variant-rgb: 195 199 202;
    --md-sys-color-outline: #8d9194;
    --md-sys-color-outline-rgb: 141 145 148;
    --md-sys-color-outline-variant: #43474a;
    --md-sys-color-outline-variant-rgb: 67 71 74;
    --md-sys-color-inverse-surface: #e1e3e5;
    --md-sys-color-inverse-surface-rgb: 225 227 229;
    --md-sys-color-inverse-on-surface: #2e3133;
    --md-sys-color-inverse-on-surface-rgb: 46 49 51;
    --md-sys-color-inverse-primary: #a24700;
    --md-sys-color-inverse-primary-rgb: 162 71 0;
}

#tema2-theme-toggle {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
                background-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

#tema2-theme-toggle:active {
    transform: scale(0.94);
    transition-duration: 120ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

#tema2-theme-toggle .tema2-theme-toggle__icon-dark,
#tema2-theme-toggle .tema2-theme-toggle__icon-light {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    margin: 0;
    line-height: 1;
    transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

html.light .tema2-theme-toggle__icon-light {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

html.light .tema2-theme-toggle__icon-dark {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-70deg) scale(0.65);
    pointer-events: none;
}

html.dark .tema2-theme-toggle__icon-dark {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

html.dark .tema2-theme-toggle__icon-light {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(70deg) scale(0.65);
    pointer-events: none;
}

::view-transition-old(root) {
    animation: none;
    z-index: 1;
    mix-blend-mode: normal;
}

::view-transition-new(root) {
    z-index: 2;
    mix-blend-mode: normal;
    animation: tema2-theme-crossfade 480ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

::view-transition-group(root) {
    animation-duration: 480ms;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes tema2-theme-crossfade {
    from { opacity: 0; }
    to { opacity: 1; }
}

html.tema2-theme-settling *:not(img):not(svg):not(video):not(canvas):not(iframe) {
    transition-property: background-color, color, border-color, outline-color, box-shadow, fill, stroke;
    transition-duration: 420ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
    #tema2-theme-toggle,
    #tema2-theme-toggle:active,
    #tema2-theme-toggle .tema2-theme-toggle__icon-dark,
    #tema2-theme-toggle .tema2-theme-toggle__icon-light {
        transition: none;
    }

    html.light .tema2-theme-toggle__icon-dark,
    html.dark .tema2-theme-toggle__icon-light {
        transform: translate(-50%, -50%);
    }

    html.light .tema2-theme-toggle__icon-light,
    html.dark .tema2-theme-toggle__icon-dark {
        transform: translate(-50%, -50%);
    }

    ::view-transition-old(root),
    ::view-transition-new(root),
    ::view-transition-group(root) {
        animation: none !important;
    }

    html.tema2-theme-settling *:not(img):not(svg):not(video):not(canvas):not(iframe) {
        transition: none !important;
    }
}