/* Accessibility font imports */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;700&display=swap');
/* NOTE: OpenDyslexic must be self-hosted. Place the font files in wwwroot/fonts/ and uncomment:
@font-face {
    font-family: 'OpenDyslexic';
    src: url('../fonts/OpenDyslexic-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'OpenDyslexic';
    src: url('../fonts/OpenDyslexic-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
*/

:root {
    /* Primary colors */
    --color-primary: #4A90D9;
    --color-primary-light: #6BB5FF;
    --color-primary-dark: #2E6CB5;

    /* Accent colors */
    --color-accent: #FF6B6B;
    --color-accent-light: #FF9999;
    --color-success: #2E7D32;
    --color-success-light: #66BB6A;
    --color-success-bg: #E8F5E9;
    --color-warning: #E65100;
    --color-warning-light: #FF9800;
    --color-warning-bg: #FFF3E0;
    --color-error: #D32F2F;

    /* Background colors */
    --color-bg: #F0F8FF;
    --color-bg-card: #FFFFFF;
    --color-bg-game: #E8F4FD;
    --color-bg-overlay: rgba(0, 0, 0, 0.5);

    /* Text colors */
    --color-text: #2C3E50;
    --color-text-light: #5D6D7E;
    --color-text-white: #FFFFFF;
    --color-text-muted: #95A5A6;

    /* Star colors */
    --color-star-filled: #FFD700;
    --color-star-empty: #9E9E9E;

    /* Game-specific colors */
    --color-balloon-red: #FF6B6B;
    --color-balloon-blue: #4A90D9;
    --color-balloon-green: #4CAF50;
    --color-balloon-yellow: #FFD93D;
    --color-balloon-purple: #9B59B6;
    --color-balloon-orange: #FF8C42;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-xxl: 48px;

    /* Border radius */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-round: 50%;

    /* Font sizes (overridden by settings-loader.js when font scale changes) */
    --font-xs: 14px;
    --font-sm: 16px;
    --font-md: 18px;
    --font-lg: 24px;
    --font-xl: 32px;
    --font-xxl: 48px;
    --font-display: 64px;

    /* Accessibility: font family (overridden by settings-loader.js) */
    --font-family: 'Open Sans', 'Nunito', 'Segoe UI', sans-serif;

    /* Accessibility: font scale factor (overridden by settings-loader.js) */
    --font-scale: 1;

    /* Accessibility: snap/drag distance for touch interactions */
    --snap-distance: 20px;

    /* Touch target minimum (76px for children 4-7 per research) */
    --touch-min: 76px;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 500ms ease;
}

/* Reduce animations: disable transitions and animations globally */
body.reduce-animations,
body.reduce-animations * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}

/* Focus mode: hide decorative elements */
body.focus-mode .mascot-character,
body.focus-mode .confetti-celebration,
body.focus-mode .animated-feedback__particles,
body.focus-mode .decorative,
body.focus-mode .nav-menu {
    display: none !important;
}