/**
 * TapTalk AAC 10-Theme Engine (5 Cool/Boy Themes + 5 Warm/Girl Themes)
 * Free-Forever Open Source Design Tokens
 */

/* 1. Galactic Cosmic Blue 🚀 */
body.theme-cosmic-blue {
    --bg-main: #0b132b;
    --panel-bg: #1c2541;
    --card-bg: #3a506b;
    --accent-color: #48cae4;
    --text-color: #ffffff;
    --border-color: #5bc0be;
}

/* 2. Jurassic Forest Green 🦖 */
body.theme-jurassic-green {
    --bg-main: #1b4332;
    --panel-bg: #2d6a4f;
    --card-bg: #40916c;
    --accent-color: #74c69d;
    --text-color: #f8fafc;
    --border-color: #b7e4c7;
}

/* 3. Supercar Racing Red 🏎️ */
body.theme-racing-red {
    --bg-main: #1a1a2e;
    --panel-bg: #16213e;
    --card-bg: #0f3460;
    --accent-color: #e63946;
    --text-color: #ffffff;
    --border-color: #ff4d6d;
}

/* 4. Retro Cyber Arcade 👾 */
body.theme-cyber-arcade {
    --bg-main: #240046;
    --panel-bg: #3c096c;
    --card-bg: #5a189a;
    --accent-color: #ff9e00;
    --text-color: #ffffff;
    --border-color: #ff6d00;
}

/* 5. Deep Sea Explorer 🌊 */
body.theme-deep-sea {
    --bg-main: #03045e;
    --panel-bg: #0077b6;
    --card-bg: #0096c7;
    --accent-color: #90e0ef;
    --text-color: #ffffff;
    --border-color: #caf0f8;
}

/* 6. Magic Unicorn Pastel 🦄 */
body.theme-unicorn-pastel {
    --bg-main: #f3e8ff;
    --panel-bg: #faf5ff;
    --card-bg: #e9d5ff;
    --accent-color: #c084fc;
    --text-color: #4c1d95;
    --border-color: #a855f7;
}

/* 7. Cherry Blossom Pink 🌸 */
body.theme-cherry-blossom {
    --bg-main: #fdf2f8;
    --panel-bg: #fce7f3;
    --card-bg: #fbcfe8;
    --accent-color: #f43f5e;
    --text-color: #881337;
    --border-color: #fb7185;
}

/* 8. Sunflower Golden Sunshine 🌻 */
body.theme-golden-sunshine {
    --bg-main: #fef3c7;
    --panel-bg: #fde68a;
    --card-bg: #fcd34d;
    --accent-color: #f59e0b;
    --text-color: #78350f;
    --border-color: #fbbf24;
}

/* 9. Sweet Candy Cotton 🍬 */
body.theme-candy-cotton {
    --bg-main: #f0fdf4;
    --panel-bg: #dcfce7;
    --card-bg: #bbf7d0;
    --accent-color: #ec4899;
    --text-color: #14532d;
    --border-color: #f472b6;
}

/* 10. Rainbow Fantasy Wonderland 🌈 */
body.theme-rainbow-fantasy {
    --bg-main: #18181b;
    --panel-bg: #27272a;
    --card-bg: #3f3f46;
    --accent-color: #38bdf8;
    --text-color: #ffffff;
    --border-color: #a855f7;
}



/* === 3D CLAYMORPHIC CUSHION MASTER DESIGN SYSTEM === */
button[data-tile], .tile, [role="button"][data-tile], div[data-tile] {
    position: relative !important;
    background: linear-gradient(145deg, #38bdf8 0%, #0284c7 100%) !important;
    border-radius: 24px 30px 22px 22px !important;
    border: 3px solid #7dd3fc !important;
    box-shadow: 
        inset 3px 3px 6px rgba(255, 255, 255, 0.7),
        inset -5px -5px 10px rgba(0, 0, 0, 0.3),
        0 14px 28px rgba(2, 132, 199, 0.35) !important;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    cursor: pointer !important;
}

/* Category Folder Top Tab Lip */
button[data-tile]::before, .tile::before {
    content: '' !important;
    position: absolute !important;
    top: -12px !important;
    left: 16px !important;
    width: 65px !important;
    height: 18px !important;
    background: #38bdf8 !important;
    border-radius: 10px 10px 0 0 !important;
    border-top: 3px solid #7dd3fc !important;
    border-left: 3px solid #7dd3fc !important;
    border-right: 3px solid #7dd3fc !important;
    box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.6) !important;
}

/* Interactive 3D Spring Hover */
button[data-tile]:hover, .tile:hover {
    transform: translateY(-8px) scale(1.04) rotateX(4deg) !important;
    box-shadow: 
        inset 4px 4px 8px rgba(255, 255, 255, 0.9),
        inset -6px -6px 12px rgba(0, 0, 0, 0.35),
        0 22px 40px rgba(2, 132, 199, 0.5) !important;
}

/* Touch Press Down 3D Cushion Effect */
button[data-tile]:active, .tile:active {
    transform: translateY(2px) scale(0.97) !important;
    box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.4) !important;
}

/* Typography Inside Tiles */
button[data-tile] span, .tile span, [role="button"][data-tile] span {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    font-size: 1.2rem !important;
    color: #ffffff !important;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7) !important;
}

/* 3D Sentence & Output Bar */
header, div[class*="output"], div[class*="Output"], div[class*="Sentence"] {
    background: linear-gradient(145deg, #1e293b, #0f172a) !important;
    border-bottom: 3.5px solid #38bdf8 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}



/* === IMPERVIOUS 3D CLAYMORPHIC TAPTALK TAPTALK AAC REDESIGN === */

/* Ensure tile containers allow top folder tab lips to overflow without clipping */
.Tile, .Tile__Button, [class*="Tile"], button[class*="Tile"], div[class*="Tile"], button[data-tile] {
    overflow: visible !important;
    position: relative !important;
    box-sizing: border-box !important;
    transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* 1. BLUE CATEGORY FOLDERS (3D Claymorphic Cushion + Top Folder Tab) */
[class*="Tile"][style*="179, 229, 252"],
[class*="Tile"][style*="179,229,252"],
[class*="Tile"][style*="b3e5fc"],
button[class*="Tile"][style*="179"],
div[class*="Tile"][style*="179"],
.Tile--folder {
    background: linear-gradient(145deg, #38bdf8 0%, #0284c7 100%) !important;
    border: 3px solid #7dd3fc !important;
    border-radius: 20px 26px 18px 18px !important;
    box-shadow: 
        inset 3px 3px 6px rgba(255, 255, 255, 0.7),
        inset -5px -5px 10px rgba(0, 0, 0, 0.3),
        0 12px 26px rgba(2, 132, 199, 0.4) !important;
}

/* 3D Top Folder Tab Lip for Category Folders */
[class*="Tile"][style*="179, 229, 252"]::before,
[class*="Tile"][style*="179,229,252"]::before,
[class*="Tile"][style*="b3e5fc"]::before,
button[class*="Tile"][style*="179"]::before,
div[class*="Tile"][style*="179"]::before,
.Tile--folder::before {
    content: '' !important;
    position: absolute !important;
    top: -12px !important;
    left: 14px !important;
    width: 60px !important;
    height: 16px !important;
    background: #38bdf8 !important;
    border-radius: 8px 8px 0 0 !important;
    border-top: 3px solid #7dd3fc !important;
    border-left: 3px solid #7dd3fc !important;
    border-right: 3px solid #7dd3fc !important;
    box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.6) !important;
    z-index: 10 !important;
}

/* 2. YELLOW SPEAKABLE TILES (3D Claymorphic Cushion) */
[class*="Tile"][style*="255, 245, 157"],
[class*="Tile"][style*="255,245,157"],
[class*="Tile"][style*="fff59d"],
button[class*="Tile"][style*="255"],
div[class*="Tile"][style*="255"] {
    background: linear-gradient(145deg, #fde047 0%, #eab308 100%) !important;
    border: 3px solid #fef08a !important;
    border-radius: 20px !important;
    box-shadow: 
        inset 3px 3px 6px rgba(255, 255, 255, 0.8),
        inset -4px -4px 8px rgba(0, 0, 0, 0.25),
        0 10px 22px rgba(234, 179, 8, 0.35) !important;
}

/* 3. TILE HOVER & ACTIVE SPRING ANIMATIONS */
[class*="Tile"]:hover, button[data-tile]:hover {
    transform: translateY(-6px) scale(1.03) !important;
    box-shadow: 
        inset 4px 4px 8px rgba(255, 255, 255, 0.9),
        inset -6px -6px 12px rgba(0, 0, 0, 0.35),
        0 18px 36px rgba(2, 132, 199, 0.5) !important;
}

[class*="Tile"]:active, button[data-tile]:active {
    transform: translateY(2px) scale(0.97) !important;
    box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.4) !important;
}

/* 4. TILE TEXT LABELS */
[class*="Tile"] span, [class*="Tile"] p, [class*="Tile"] div {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6) !important;
}

/* 5. BOOTSTRAP STACKING & GRID EQUALIZATION */
@media (max-width: 576px) {
    [class*="Tile"][style*="179, 229, 252"]::before,
    button[class*="Tile"][style*="179"]::before {
        top: -8px !important;
        left: 10px !important;
        width: 42px !important;
        height: 12px !important;
    }
}



/* === TAPTALK 3D GLOSSY ACRYLIC GLASS DESIGN SYSTEM === */

/* Container overflow & positioning */
#root button, #root div[role="button"], #root [class*="Tile"], #root [class*="button"] {
    overflow: visible !important;
    position: relative !important;
    box-sizing: border-box !important;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* 1. BLUE CATEGORY FOLDERS (3D Glossy Acrylic Glass + Top Glass Tab Lip) */
#root button[style*="179"], #root div[style*="179"],
#root button[style*="129"], #root div[style*="129"],
#root button[style*="b3e5fc"], #root div[style*="b3e5fc"],
#root [style*="179, 229, 252"], #root [style*="179,229,252"],
#root [style*="129, 212, 250"], #root [style*="129,212,250"],
.taptalk-3d-claymorphic-folder, .taptalk-3d-glossy-folder {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(14, 165, 233, 0.88) 100%) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border: 3.5px solid #7dd3fc !important;
    border-radius: 22px 28px 20px 20px !important;
    box-shadow: 
        0 16px 36px rgba(14, 165, 233, 0.4),
        0 0 24px rgba(125, 211, 252, 0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.85),
        inset 0 -3px 6px rgba(0, 0, 0, 0.2) !important;
}

/* Glowing Top Glass Tab Lip for Category Folders */
#root button[style*="179"]::before, #root div[style*="179"]::before,
#root button[style*="129"]::before, #root div[style*="129"]::before,
#root [style*="179, 229, 252"]::before, #root [style*="179,229,252"]::before,
.taptalk-3d-claymorphic-folder::before, .taptalk-3d-glossy-folder::before {
    content: '' !important;
    position: absolute !important;
    top: -14px !important;
    left: 18px !important;
    width: 68px !important;
    height: 18px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.65) 0%, rgba(56, 189, 248, 0.9) 100%) !important;
    backdrop-filter: blur(12px) !important;
    border-radius: 12px 12px 0 0 !important;
    border-top: 3.5px solid #7dd3fc !important;
    border-left: 3.5px solid #7dd3fc !important;
    border-right: 3.5px solid #7dd3fc !important;
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.8) !important;
    z-index: 100 !important;
}

/* 2. YELLOW SPEAKABLE TILES (3D Glossy Amber Glass) */
#root button[style*="255"], #root div[style*="255"],
#root [style*="255, 245, 157"], #root [style*="255,245,157"],
.taptalk-3d-claymorphic-tile, .taptalk-3d-glossy-tile {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(234, 179, 8, 0.9) 100%) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border: 3.5px solid #fef08a !important;
    border-radius: 22px !important;
    box-shadow: 
        0 14px 32px rgba(234, 179, 8, 0.4),
        0 0 20px rgba(254, 240, 138, 0.35),
        inset 0 2px 4px rgba(255, 255, 255, 0.9) !important;
}

/* 3. GLOSSY TILE HOVER & ACTIVE ANIMATIONS */
#root button:hover, #root div[role="button"]:hover, .taptalk-3d-glossy-folder:hover {
    transform: translateY(-8px) scale(1.04) !important;
    border-color: #ffffff !important;
    box-shadow: 
        0 24px 50px rgba(14, 165, 233, 0.55),
        0 0 35px rgba(255, 255, 255, 0.5),
        inset 0 3px 6px rgba(255, 255, 255, 0.95) !important;
}

#root button:active, #root div[role="button"]:active {
    transform: translateY(2px) scale(0.97) !important;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.35) !important;
}

/* 4. HIGH-CONTRAST TYPOGRAPHY */
#root button span, #root button p, #root div[role="button"] span {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    font-size: 1.18rem !important;
    color: #0f172a !important;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9) !important;
}