/* MGF.AI public — tokens.css */

:root {
    /* Core background - Spatial Deep Dark */
    --bg:            #030407; /* Noir obsidienne profond */
    --bg-surface:    #0a0b10;
    --bg-elevated:   rgba(20, 22, 30, 0.4); /* Base pour le verre dépoli */
    --bg-glass:      rgba(15, 17, 24, 0.65); /* Verre lourd */

    /* Glassmorphism Borders & Shadows */
    --border:        rgba(255, 255, 255, 0.05);
    --border-light:  rgba(255, 255, 255, 0.12); /* Pour les reflets supérieurs */
    --border-active: rgba(255, 255, 255, 0.25);
    --shadow-glass:  0 8px 32px 0 rgba(0, 0, 0, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.1);

    /* Mode Sweet — rose néon */
    --sweet-primary:   #ff3377;
    --sweet-secondary: #ff85b3;
    --sweet-glow:      rgba(255, 51, 119, 0.35);
    --sweet-dim:       rgba(255, 51, 119, 0.08);

    /* Mode After Dark — violet laser */
    --dark-primary:   #7928ca;
    --dark-secondary: #9a4cff;
    --dark-glow:      rgba(121, 40, 202, 0.35);
    --dark-dim:       rgba(121, 40, 202, 0.08);

    /* Active mode (overridden by JS) */
    --primary:      var(--sweet-primary);
    --primary-glow: var(--sweet-glow);
    --primary-dim:  var(--sweet-dim);
    --secondary:    var(--dark-primary);

    /* Text - Contraste extrème */
    --text:       #ffffff;
    --text-muted: #8b92a5;
    --text-faint: #42485e;

    /* Tokens (gamification) */
    --xp-color:   #ffb000;
    --token-color:#00f0ff;

    /* Shape - Plus arrondi, organique */
    --radius-xs: 6px;
    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 28px;
    --radius-xl: 40px;

    /* Transitions - Spring Physics (Rebond) */
    --transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.15); /* Effet ressort léger */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* After Dark mode overrides */
[data-mode="after_dark"] {
    --primary:      var(--dark-primary);
    --primary-glow: var(--dark-glow);
    --primary-dim:  var(--dark-dim);
}