/* ==========================================================================
   🎨 LITTLE SAGAS — DESIGN TOKENS
   Fichier partagé par toutes les pages (app, auth, admin, landing)
   DARK MODE = défaut | .light-mode = jour
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=Nunito:wght@400;600;700&display=swap');

:root {
    /* ── COULEURS FOND ── */
    --bg-deep:        #0d0f1a;
    --bg-card:        #161829;
    --bg-card-hover:  #1c1f38;
    --bg-surface:     rgba(255, 255, 255, 0.04);

    /* ── BORDURES ── */
    --border-subtle:  rgba(255, 255, 255, 0.06);
    --border-medium:  rgba(255, 255, 255, 0.12);

    /* ── ACCENTS ── */
    --accent-primary:    #f6a623;
    --accent-glow:       rgba(246, 166, 35, 0.25);
    --accent-secondary:  #e84393;
    --accent-tertiary:   #6c5ce7;
    --accent-blue:       #3498db;

    /* ── TEXTE ── */
    --text-primary:   #f0ede6;
    --text-secondary: #9b97a8;
    --text-muted:     #5c5872;
    --text-inverse:   #1a1200;

    /* ── SÉMANTIQUE ── */
    --success:    #00b894;
    --error:      #ff6b6b;
    --warning:    #f1c40f;
    --info:       #3498db;
    --danger:     #e74c3c;

    /* ── RAYONS ── */
    --radius-xs:  4px;
    --radius-sm:  8px;
    --radius-md:  14px;
    --radius-lg:  22px;
    --radius-xl:  30px;
    --radius-full: 50%;

    /* ── POLICES ── */
    --font-display: 'Baloo 2', cursive;
    --font-body:    'Nunito', sans-serif;

    /* ── OMBRES ── */
    --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.3);
    --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 80px rgba(246, 166, 35, 0.04);

    /* ── GRADIENTS ── */
    --grad-body:     radial-gradient(ellipse at 20% 50%, rgba(108, 92, 231, 0.08) 0%, transparent 60%),
                     radial-gradient(ellipse at 80% 20%, rgba(246, 166, 35, 0.06) 0%, transparent 50%),
                     radial-gradient(ellipse at 50% 80%, rgba(232, 67, 147, 0.05) 0%, transparent 50%);
    --grad-accent:   linear-gradient(135deg, var(--accent-primary) 0%, #e8951a 100%);
    --grad-badge:    linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));

    /* ── TRANSITIONS ── */
    --transition-fast:   0.15s ease;
    --transition-base:   0.25s ease;
    --transition-slow:   0.4s ease;

    /* ── ÉTOILES (dark) ── */
    --star-color:    var(--accent-primary);
    --star-opacity:  0.8;
}

/* ==========================================================================
   ☀️ MODE JOUR (LIGHT)
   ========================================================================== */
body.light-mode {
    --bg-deep:        #f5f0e8;
    --bg-card:        #ffffff;
    --bg-card-hover:  #faf8f5;
    --bg-surface:     rgba(0, 0, 0, 0.03);

    --border-subtle:  rgba(0, 0, 0, 0.08);
    --border-medium:  rgba(0, 0, 0, 0.12);

    --text-primary:   #2c3e50;
    --text-secondary: #636e72;
    --text-muted:     #b2bec3;
    --text-inverse:   #ffffff;

    --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.1);
    --shadow-glow: none;

    --grad-body: none;

    --star-color:    #d35400;
    --star-opacity:  0.35;
}