/* =======================================================
   GANESHA RIDDLE QUIZ — DISNEY-PIXAR INDIAN TEMPLE THEME
   Style by: Senior UI/UX + Frontend
   ======================================================= */

/* ===================== DESIGN TOKENS ===================== */
:root {
    /* ----- Stone Palette ----- */
    --stone-primary: #E8D2AE;
    /* Warm sandstone – main panel surface */
    --stone-light: #F8F1E5;
    /* Soft ivory – inner card surface      */
    --stone-dark: #C8A87A;
    /* Dark sandstone – shadows / locked    */
    --stone-deeper: #B8966A;
    /* Deeply-shadowed stone                */

    /* ----- Accent Colors ----- */
    --gold: #D4A017;
    /* Temple gold                          */
    --gold-light: #F0C84A;
    /* Bright gold – hover glows            */
    --gold-dark: #9E7510;
    /* Muted gold – borders                 */
    --terracotta: #C97B4A;
    /* Clay / wrong-answer                  */
    --warm-brown: #6E4D32;
    /* Carved wood – buttons                */
    --warm-brown-dark: #4A3525;
    /* Very dark brown – text               */
    --green-soft: #6DBF8A;
    /* Gentle correct-answer green          */
    --green-bg: #D6EFD8;
    /* Correct-answer tile background       */
    --red-bg: #F5DBCF;
    /* Wrong-answer tile background         */

    /* ----- Text ----- */
    --text-color: #4A3525;
    /* Warm dark brown – body text          */
    --text-muted: #8B6844;
    /* Muted brown – labels                 */
    --text-gold: #9E7510;
    /* Gold text                            */

    /* ----- Fonts ----- */
    --font-primary: 'Outfit', sans-serif;
    --font-display: 'Poppins', sans-serif;
    --font-gameplay: 'Cinzel', serif;

    /* ----- Shadows ----- */
    --shadow-panel: 0 8px 24px rgba(90, 60, 25, 0.14);
    --shadow-lift: 0 14px 32px rgba(90, 60, 25, 0.20);
    --shadow-inset: inset 0 3px 8px rgba(90, 60, 25, 0.15);
    --shadow-bevel: inset 1px 1px 0 rgba(255, 255, 255, 0.55),
        inset -1px -1px 0 rgba(90, 60, 25, 0.18);

    /* ----- Transitions ----- */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Legacy compatibility aliases */
    --color-orange: var(--terracotta);
    --color-gold: var(--gold);
    --color-purple-light: var(--gold-light);
    --color-purple-dark: var(--warm-brown-dark);
    --color-success: var(--green-soft);
    --color-danger: var(--terracotta);
    --color-text: var(--text-color);
    --color-text-muted: var(--text-muted);
    --glass-bg: var(--stone-primary);
    --glass-border: var(--gold-dark);
    --glass-shadow: var(--shadow-panel);
    --glass-glow: 0 0 20px rgba(212, 160, 23, 0.30);
}