:root {
    /* Primary palette - warm and inviting for kids */
    --color-primary: #4A90D9;
    --color-primary-dark: #2E6BB0;
    --color-primary-light: #7BB3E8;
    --color-secondary: #FFB347;
    --color-secondary-dark: #E89A2E;
    --color-accent: #7ED957;
    --color-danger: #FF6B6B;

    /* Backgrounds */
    --color-bg: #F5F0E8;
    --color-bg-card: #FFFFFF;
    --color-bg-dark: #2C3E50;

    /* Category tint colors */
    --color-cat-rules: rgba(74, 144, 217, 0.08);
    --color-cat-checkmate: rgba(255, 179, 71, 0.1);
    --color-cat-tactics: rgba(255, 107, 107, 0.08);
    --color-cat-challenges: rgba(126, 217, 87, 0.08);

    /* Board colors */
    --color-board-light: #F5E6C8;
    --color-board-dark: #C4956A;
    --color-board-highlight: rgba(255, 255, 0, 0.4);
    --color-board-selected: rgba(20, 85, 200, 0.5);
    --color-board-legal: rgba(0, 0, 0, 0.15);
    --color-board-hint: rgba(126, 217, 87, 0.6);

    /* Star colors */
    --color-star-earned: #FFD700;
    --color-star-empty: #D3D3D3;

    /* Typography */
    --font-family: 'Rubik', sans-serif;
    --color-text: #333333;
    --color-text-light: #666666;
    --color-text-white: #FFFFFF;

    /* Fluid typography */
    --font-size-body: clamp(1rem, 2.5vw, 1.25rem);
    --font-size-heading: clamp(1.5rem, 4vw, 2rem);
    --font-size-instruction: clamp(1.1rem, 3vw, 1.4rem);
    --font-size-small: clamp(0.8rem, 2vw, 0.9rem);
    --font-size-emoji-avatar: clamp(2.5rem, 8vw, 4rem);
    --font-size-emoji-icon: clamp(2rem, 6vw, 3rem);

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

    /* Borders */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-round: 50%;

    /* 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);

    /* Board sizing */
    --board-size: min(90vw, 60vh, 500px);
}

@media (orientation: landscape) and (max-height: 500px) {
    :root {
        --board-size: min(85vh, 45vw);
    }
}

@media (min-width: 768px) and (orientation: portrait) {
    :root {
        --board-size: min(70vw, 55vh, 500px);
    }
}

@media (min-width: 1024px) {
    :root {
        --board-size: 500px;
    }
}