/* LingoSwipe / Azure Kinetic color tokens (RGB triplets for Tailwind's rgb(var(--x)/<alpha-value>) pattern) */
:root {
    color-scheme: light;

    --color-background: 248 249 255;
    --color-on-background: 11 28 48;

    --color-surface: 248 249 255;
    --color-surface-dim: 203 219 245;
    --color-surface-bright: 248 249 255;
    --color-surface-container-lowest: 255 255 255;
    --color-surface-container-low: 239 244 255;
    --color-surface-container: 229 238 255;
    --color-surface-container-high: 220 233 255;
    --color-surface-container-highest: 211 228 254;

    --color-on-surface: 11 28 48;
    --color-on-surface-variant: 66 71 84;
    --color-outline: 114 119 133;
    --color-outline-variant: 194 198 214;

    --color-primary: 0 88 190;
    --color-on-primary: 255 255 255;
    --color-primary-container: 33 112 228;
    --color-on-primary-container: 254 252 255;

    --color-secondary: 84 95 115;
    --color-on-secondary: 255 255 255;
    --color-secondary-container: 213 224 248;
    --color-on-secondary-container: 88 99 119;

    --color-tertiary: 185 5 56;
    --color-on-tertiary: 255 255 255;
    --color-tertiary-container: 220 44 79;
    --color-on-tertiary-container: 255 251 255;

    --color-error: 186 26 26;
    --color-on-error: 255 255 255;
    --color-error-container: 255 218 214;
    --color-on-error-container: 147 0 10;
}

html.dark {
    color-scheme: dark;

    --color-background: 8 12 20;
    --color-on-background: 222 228 240;

    --color-surface: 8 12 20;
    --color-surface-dim: 8 12 20;
    --color-surface-bright: 40 46 58;
    --color-surface-container-lowest: 4 7 12;
    --color-surface-container-low: 15 19 28;
    --color-surface-container: 20 25 35;
    --color-surface-container-high: 27 33 44;
    --color-surface-container-highest: 34 41 53;

    --color-on-surface: 222 228 240;
    --color-on-surface-variant: 172 181 199;
    --color-outline: 122 131 148;
    --color-outline-variant: 51 59 74;

    --color-primary: 125 178 255;
    --color-on-primary: 6 33 63;
    --color-primary-container: 31 77 143;
    --color-on-primary-container: 215 230 255;

    --color-secondary: 183 194 214;
    --color-on-secondary: 37 49 65;
    --color-secondary-container: 56 68 86;
    --color-on-secondary-container: 215 224 242;

    --color-tertiary: 255 111 134;
    --color-on-tertiary: 92 0 26;
    --color-tertiary-container: 126 16 48;
    --color-on-tertiary-container: 255 217 223;

    --color-error: 255 180 169;
    --color-on-error: 105 0 5;
    --color-error-container: 147 0 10;
    --color-on-error-container: 255 218 214;
}

/* Native-app feel */
html, body {
    overscroll-behavior-y: contain;
    height: 100%;
}

body {
    font-family: 'Inter', sans-serif;
    -webkit-tap-highlight-color: transparent;
    min-height: 100dvh;
    transition: background-color 0.2s ease, color 0.2s ease;
}

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

button, a {
    touch-action: manipulation;
    -webkit-touch-callout: none;
}

nav a, nav button, header button {
    -webkit-user-select: none;
    user-select: none;
}

/* Cross-document view transitions for app-like page navigation (progressive enhancement) */
@view-transition {
    navigation: auto;
}

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

.material-symbols-outlined.fill {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

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

/* Toast */
.toast {
    position: fixed;
    bottom: calc(96px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: rgb(var(--color-on-surface));
    color: rgb(var(--color-surface));
    padding: 12px 20px;
    border-radius: 9999px;
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.2);
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    z-index: 100;
    max-width: calc(100% - 40px);
    text-align: center;
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.toast.error {
    background: rgb(var(--color-error));
    color: rgb(var(--color-on-error));
}

/* Quiz answer feedback */
@keyframes pulse-primary {
    0% { box-shadow: 0 0 0 0 rgb(var(--color-primary) / 0.35); }
    70% { box-shadow: 0 0 0 12px rgb(var(--color-primary) / 0); }
    100% { box-shadow: 0 0 0 0 rgb(var(--color-primary) / 0); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.answer-correct {
    background-color: rgb(var(--color-primary)) !important;
    color: rgb(var(--color-on-primary)) !important;
    border-color: rgb(var(--color-primary)) !important;
    animation: pulse-primary 0.8s;
}

.answer-incorrect {
    background-color: rgb(var(--color-error)) !important;
    color: rgb(var(--color-on-error)) !important;
    border-color: rgb(var(--color-error)) !important;
    animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

/* Mic button */
@keyframes mic-pulse {
    0% { box-shadow: 0 0 0 0 rgb(var(--color-tertiary) / 0.4); }
    70% { box-shadow: 0 0 0 18px rgb(var(--color-tertiary) / 0); }
    100% { box-shadow: 0 0 0 0 rgb(var(--color-tertiary) / 0); }
}

.mic-listening {
    animation: mic-pulse 1.2s infinite;
}

/* Card flip */
.perspective-1000 { perspective: 1000px; }
.preserve-3d { transform-style: preserve-3d; }
.backface-hidden { backface-visibility: hidden; }
.rotate-y-180 { transform: rotateY(180deg); }