/* shared/ui/tokens.css — Design tokens "Minijeux de la Loutre".
 *
 * Variables CSS partagées entre tous les jeux + le hub minijeux-hub.
 * Chaque jeu peut surcharger les tokens via un `:root` plus spécifique dans son propre style.css.
 *
 * Usage : `@import '@shared/ui/tokens.css';` côté Vite, ou
 *         `<link rel="stylesheet" href="/shared-ui/tokens.css">` côté hub statique.
 *
 * Préfixe `--mj-*` (Minijeux) pour éviter toute collision avec les variables jeu-spécifiques
 * (--neon-green, --accent, --fog, etc.) qui restent dans le style.css du jeu.
 */

:root {
    /* === Palette de base (Minijeux de la Loutre : tons bois/terre/sapin) === */
    --mj-color-bg:           #1a1d23;   /* fond principal sombre */
    --mj-color-bg-elevated:  #22262e;   /* cartes, modals */
    --mj-color-bg-overlay:   rgba(10, 12, 16, 0.85);  /* overlay modal */
    --mj-color-surface:      #2a2f37;   /* surfaces interactives au hover */
    --mj-color-border:       #3a3f47;
    --mj-color-border-soft:  rgba(255, 255, 255, 0.08);

    --mj-color-text:         #e8e6e3;
    --mj-color-text-soft:    #a9a39b;
    --mj-color-text-dim:     #6b6660;

    --mj-color-accent:       #7a9e3f;   /* vert sapin (la maison) */
    --mj-color-accent-hover: #8eb44d;
    --mj-color-accent-dim:   #5e7c30;

    --mj-color-success:      #4caf50;
    --mj-color-warning:      #ffa726;
    --mj-color-danger:       #e53935;
    --mj-color-info:         #29b6f6;

    /* === Espacement (échelle 4-pt) === */
    --mj-space-0:   0;
    --mj-space-1:   4px;
    --mj-space-2:   8px;
    --mj-space-3:   12px;
    --mj-space-4:   16px;
    --mj-space-5:   24px;
    --mj-space-6:   32px;
    --mj-space-7:   48px;
    --mj-space-8:   64px;

    /* === Rayons === */
    --mj-radius-sm:  4px;
    --mj-radius-md:  8px;
    --mj-radius-lg:  12px;
    --mj-radius-xl:  20px;
    --mj-radius-pill: 999px;

    /* === Typo === */
    --mj-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --mj-font-mono:   ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, monospace;

    --mj-text-xs:    12px;
    --mj-text-sm:    13px;
    --mj-text-base:  15px;
    --mj-text-lg:    18px;
    --mj-text-xl:    24px;
    --mj-text-2xl:   32px;
    --mj-text-3xl:   42px;

    /* === Ombres === */
    --mj-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.2);
    --mj-shadow-md:  0 4px 8px rgba(0, 0, 0, 0.25);
    --mj-shadow-lg:  0 10px 24px rgba(0, 0, 0, 0.35);

    /* === Transitions === */
    --mj-transition-fast:  120ms ease-out;
    --mj-transition-base:  180ms ease-out;
    --mj-transition-slow:  280ms ease-out;

    /* === Z-index stack === */
    --mj-z-header:   100;
    --mj-z-dropdown: 200;
    --mj-z-overlay:  900;
    --mj-z-modal:    1000;
    --mj-z-toast:    1100;
}

/* Mode "respect des préférences utilisateur" : si reduced-motion, on désactive les transitions
 * tokenisées. Les composants peuvent surcharger localement si besoin. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --mj-transition-fast: 0ms;
        --mj-transition-base: 0ms;
        --mj-transition-slow: 0ms;
    }
}