* {
    font-family: 'Nunito', sans-serif;
}

.comic-font {
    font-family: 'Comic Neue', cursive;
}

/* Themeable variables with sensible defaults */
:root {
    --kid-bg: linear-gradient(135deg, #f9c5d1 0%, #c2e9fb 100%);
    --header-gradient: linear-gradient(90deg, #ffb6c1 0%, #a3d9ff 50%, #b5ead7 100%);
    --btn-gradient: linear-gradient(90deg, #ff9a9e 0%, #fad0c4 100%);
    /* Text color variables (defaults) */
    --text-normal: #333333;
    --text-muted: #4b5563;
    --text-accent: #6b21a8;
    --text-accent-strong: #4c1d95;
    --text-highlight: #d63384;
    --text-positive: #157a6b;
    --text-warm: #b45309;
    --text-on-accent: #ffffff;
}

.kid-gradient-bg {
    background: var(--kid-bg);
}

.section-gradient-bg {
    background: linear-gradient(120deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%);
}

.header-gradient {
    background: var(--header-gradient);
}

.hobby-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hobby-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.btn-kid {
    background: var(--btn-gradient);
    transition: all 0.3s ease;
}

.btn-kid:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(255,154,158,0.4);
}

.decoration {
    position: absolute;
    z-index: 0;
    opacity: 0.7;
}

.content {
    position: relative;
    z-index: 1;
}

/* Additional theme classes (5 new themes + default) */
.theme-1 { /* Pastel Play */
    --kid-bg: linear-gradient(135deg, #f9c5d1 0%, #c2e9fb 100%);
    --header-gradient: linear-gradient(90deg, #ffb6c1 0%, #a3d9ff 50%, #b5ead7 100%);
    --btn-gradient: linear-gradient(90deg, #ff9a9e 0%, #fad0c4 100%);
    --text-normal: #3b2b5a;
    --text-muted: #5b4a6a;
    --text-accent: #7b3fa2;
    --text-accent-strong: #5a2e85;
    --text-highlight: #d94f89;
    --text-positive: #2a7f73;
    --text-warm: #c46a2a;
    --text-on-accent: #ffffff;
}

.theme-2 { /* Ocean */
    --kid-bg: linear-gradient(135deg, #d0f0ff 0%, #bfe9ff 50%, #c8f7e8 100%);
    --header-gradient: linear-gradient(90deg, #6dd5fa 0%, #2980b9 100%);
    --btn-gradient: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
    --text-normal: #063a4a;
    --text-muted: #155a75;
    --text-accent: #03588c;
    --text-accent-strong: #023e66;
    --text-highlight: #0177b6;
    --text-positive: #0e8b74;
    --text-warm: #a45a00;
    --text-on-accent: #ffffff;
}

.theme-3 { /* Sunset */
    --kid-bg: linear-gradient(135deg, #ffe29f 0%, #ffa99f 100%);
    --header-gradient: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%);
    --btn-gradient: linear-gradient(90deg, #ff9966 0%, #ff5e62 100%);
    --text-normal: #4b2b10;
    --text-muted: #7a3b1f;
    --text-accent: #b7412a;
    --text-accent-strong: #8b301f;
    --text-highlight: #ff7a59;
    --text-positive: #2f7a5a;
    --text-warm: #b04a00;
    --text-on-accent: #ffffff;
}

.theme-4 { /* Mint */
    --kid-bg: linear-gradient(135deg, #e0ffef 0%, #c7ffd8 100%);
    --header-gradient: linear-gradient(90deg, #a8e6cf 0%, #dcedc1 100%);
    --btn-gradient: linear-gradient(90deg, #9be7c4 0%, #5dd39e 100%);
    --text-normal: #114a3a;
    --text-muted: #2a6c52;
    --text-accent: #2f8b6e;
    --text-accent-strong: #1f6b4f;
    --text-highlight: #0fbf8a;
    --text-positive: #0f7f64;
    --text-warm: #a65a15;
    --text-on-accent: #ffffff;
}

.theme-5 { /* Lavender */
    --kid-bg: linear-gradient(135deg, #f3e8ff 0%, #e7d7ff 100%);
    --header-gradient: linear-gradient(90deg, #b39ddb 0%, #9575cd 100%);
    --btn-gradient: linear-gradient(90deg, #c5a3ff 0%, #9b59ff 100%);
    --text-normal: #3f2b5b;
    --text-muted: #5a4a76;
    --text-accent: #6b4bbd;
    --text-accent-strong: #4f378f;
    --text-highlight: #b78cff;
    --text-positive: #1f6a66;
    --text-warm: #8a4b08;
    --text-on-accent: #ffffff;
}

.theme-6 { /* Sunny Citrus */
    --kid-bg: linear-gradient(135deg, #fff3c4 0%, #ffe0a3 100%);
    --header-gradient: linear-gradient(90deg, #ffd89b 0%, #19547b 100%);
    --btn-gradient: linear-gradient(90deg, #ffb03b 0%, #ff7b54 100%);
    --text-normal: #5a3b07;
    --text-muted: #7a5210;
    --text-accent: #c96b10;
    --text-accent-strong: #8a4b07;
    --text-highlight: #ff8c2b;
    --text-positive: #216b53;
    --text-warm: #b45309;
    --text-on-accent: #ffffff;
}

/* Map common Tailwind text utility classes to theme variables so colors follow the theme */
body { color: var(--text-normal); }
.text-gray-700 { color: var(--text-muted) !important; }
.text-gray-800 { color: var(--text-normal) !important; }
.text-purple-700 { color: var(--text-accent) !important; }
.text-purple-800 { color: var(--text-accent-strong) !important; }
.text-pink-600 { color: var(--text-highlight) !important; }
.text-blue-700 { color: var(--text-accent) !important; }
.text-green-600 { color: var(--text-positive) !important; }
.text-yellow-600 { color: var(--text-warm) !important; }
.text-indigo-700 { color: var(--text-accent) !important; }
.text-gray-700, .text-gray-800, .text-gray-700 a { color: var(--text-muted) !important; }
.comic-font, .comic-font a { color: var(--text-accent) !important; }
a { color: var(--text-accent); }

/* Ensure all button-like elements use white text regardless of theme */
.btn-kid, .btn-kid *,
.btn, .btn *,
button, button *,
input[type="button"], input[type="button"] *,
input[type="submit"], input[type="submit"] *,
a.btn, a.btn * {
    color: #ffffff !important;
}

/* Footer uses the theme header gradient by default and theme on-accent color for inner text */
.footer-gradient {
    background: var(--header-gradient);
    color: var(--text-on-accent);
}

/* Utility to apply the theme background to a block (section) */
.themed-bg {
    background: var(--kid-bg);
}