/* ═══════════════════════════════════════════════════════════════════════════
   VietGuide — Design Tokens centralisés
   Fichier partagé entre le plugin wp-language-viet-premium et le thème vietguide.
   Lot 5 — Cohérence visuelle + UX gamifiée
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Échelle spacing 4/8 ────────────────────────────────────────────────── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  /* ── Échelle border-radius ──────────────────────────────────────────────── */
  --r-xs: 6px;  --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px;
  --r-pill: 999px;

  /* ── Échelle ombres ─────────────────────────────────────────────────────── */
  --sh-1: 0 1px 2px rgba(0,0,0,.10);
  --sh-2: 0 2px 8px rgba(0,0,0,.15);
  --sh-3: 0 4px 16px rgba(0,0,0,.20);
  --sh-4: 0 8px 32px rgba(0,0,0,.30);
  --sh-glow-primary: 0 0 0 3px rgba(218,37,29,.18), 0 4px 16px rgba(218,37,29,.35);
  --sh-glow-gold: 0 0 0 3px rgba(255,205,0,.18), 0 4px 16px rgba(255,205,0,.35);

  /* ── Durées de transition ──────────────────────────────────────────────── */
  --dur-instant: .1s;   --dur-fast: .15s;  --dur-base: .25s;
  --dur-slow: .4s;      --dur-xslow: .6s;

  /* ── Easings ───────────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --ease-spring: cubic-bezier(.175, .885, .32, 1.275);

  /* ── z-index scale strict (NE PAS dépasser INT32_MAX) ──────────────────── */
  --z-base: 1;
  --z-sticky: 100;
  --z-dropdown: 1000;
  --z-overlay: 9000;
  --z-modal: 9999;
  --z-toast: 10000;
  --z-max: 99999;

  /* ── Palette app dark — VietGuide (Drapeau Heritage) ────────────────────── */
  --vg-bg: #1a0606;            /* Dark rouge très sombre */
  --vg-surface: #2b0a0a;       /* Surface sombre rouge sang */
  --vg-text: #FFF8E7;          /* Crème riz — contraste sur fond sombre */
  --vg-muted: #c9a9a9;         /* Rose pâle pour texte secondaire */
  --vg-primary: #DA251D;       /* Rouge drapeau du Vietnam */
  --vg-primary-dk: #8B0E0E;    /* Rouge sang (hover / press) */
  --vg-primary-bg: #2B0A0A;    /* Noir rougeâtre (fond dark) */
  --vg-green: #8B0E0E;         /* Vert bambou (succès) */
  --vg-red: #DA251D;           /* Rouge drapeau (erreurs) */
  --vg-gold: #FFCD00;          /* Jaune étoile (or / XP / trophées) */
  --vg-purple: #C9A227;        /* Or impérial (accent secondaire, ex. Hué) */

  /* ── Palette modules unifiée (1 couleur = 1 module, partout) ────────────── */
  --mod-vocab: #DA251D;        /* Rouge drapeau — vocabulaire */
  --mod-lessons: #C9A227;      /* Vert bambou — leçons */
  --mod-dialogues: #FFCD00;    /* Jaune étoile — dialogues */
  --mod-alphabet: #DA251D;     /* Corail Vietnam — alphabet Quốc Ngữ */
  --mod-review: #F4B400;       /* Or chaud — révision */
  --mod-stats: #FFCD00;        /* Jaune étoile — statistiques */
  --mod-stories: #C9A227;      /* Or impérial — histoires */
  --mod-niveau: #9D1B2D;       /* Rouge profond — examens de niveau */
  --mod-revision: #F4B400;     /* Or chaud — révision SRS */

  /* ── Palette médailles HARMONISÉE ──────────────────────────────────────── */
  /* Référence : gradients SVG du plugin vg-tarifs (seule source de vérité)   */
  --medal-bronze: #cd7f32;    --medal-bronze-2: #8b4513;
  --medal-silver: #a8a9ad;    --medal-silver-2: #777;
  --medal-gold: #ffd700;      --medal-gold-2: #c8860a;
  --medal-platinum: #C9A227;  --medal-platinum-2: #8B6F00;
  --grad-bronze:   linear-gradient(135deg, #e8a060, #cd7f32 50%, #8b4513);
  --grad-silver:   linear-gradient(135deg, #e8e8e8, #aaaaaa 50%, #777);
  --grad-gold:     linear-gradient(135deg, #ffe44d, #ffd700 50%, #c8860a);
  --grad-platinum: linear-gradient(135deg, #ffe44d, #C9A227 50%, #8B6F00);

  /* ── Polices ───────────────────────────────────────────────────────────── */
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, monospace;
}

/* ═══════════════════════════════════════════════════════════════════════════
   prefers-reduced-motion — WCAG 2.3.3 (a11y critique pour vestibulaire)
   Désactive toutes les animations pour les utilisateurs sensibles au mouvement.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MICRO-ANIMATIONS GAMIFIÉES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Ripple au clic bouton (Material-style) ──────────────────────────────── */
.wplcv-btn, .demo-btn {
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-instant) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.wplcv-btn:active, .demo-btn:active {
  transform: translateY(2px) scale(.97);
  border-bottom-width: 1px;
}
.wplcv-btn::after, .demo-btn::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.wplcv-btn.is-rippling::after, .demo-btn.is-rippling::after {
  animation: vg-ripple .5s var(--ease-out);
}
@keyframes vg-ripple {
  0%   { width: 0; height: 0; opacity: .5; }
  100% { width: 320px; height: 320px; opacity: 0; }
}

/* ── Quiz : retours haptiques visuels ────────────────────────────────────── */
@keyframes vg-quiz-correct {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@keyframes vg-quiz-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-8px); }
  40%      { transform: translateX(8px); }
  60%      { transform: translateX(-6px); }
  80%      { transform: translateX(4px); }
}
.wplcv-answer-btn.correct,
.wplcv-tone-choice.correct,
.wplcv-choice.correct {
  animation: vg-quiz-correct var(--dur-base) var(--ease-bounce);
}
.wplcv-answer-btn.wrong,
.wplcv-tone-choice.wrong,
.wplcv-choice.wrong {
  animation: vg-quiz-shake var(--dur-base) var(--ease-out);
}

/* ── Gain XP : burst doré qui s'envole ───────────────────────────────────── */
@keyframes vg-xp-burst {
  0%   { transform: translateY(0) scale(.8); opacity: 0; }
  20%  { transform: translateY(-10px) scale(1.3); opacity: 1; }
  100% { transform: translateY(-60px) scale(1); opacity: 0; }
}
.vg-xp-pop {
  position: fixed;
  z-index: var(--z-toast);
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 1.2rem;
  color: var(--medal-gold);
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
  pointer-events: none;
  animation: vg-xp-burst 1s var(--ease-bounce) forwards;
}

/* ── Transitions entre écrans (slide directionnel) ───────────────────────── */
@keyframes vg-screen-enter-right {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes vg-screen-enter-left {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
.wplcv-body > * {
  animation: vg-screen-enter-right var(--dur-base) var(--ease-out);
}
.wplcv-body[data-dir="back"] > * {
  animation: vg-screen-enter-left var(--dur-base) var(--ease-out);
}

/* ── Streak jour validé : check-pop ──────────────────────────────────────── */
@keyframes vg-check-pop {
  0%   { transform: scale(0) rotate(-30deg); }
  60%  { transform: scale(1.3) rotate(8deg); }
  100% { transform: scale(1) rotate(0); }
}
.vg-wk-day.vg-wk-active.vg-wk-just-validated .vg-wk-dot {
  animation: vg-check-pop var(--dur-slow) var(--ease-bounce);
}

/* ── Bottom-nav : pulse du bouton central ────────────────────────────────── */
@keyframes vg-bnav-pulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(206,147,216,.55), 0 0 0 0 rgba(206,147,216,.6); }
  50%      { box-shadow: 0 6px 20px rgba(206,147,216,.55), 0 0 0 12px rgba(206,147,216,0); }
}
.wplcv-bnav-c4 .wplcv-bnav-icon.vg-pulsing {
  animation: vg-bnav-pulse 2.4s var(--ease-out) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .wplcv-bnav-c4 .wplcv-bnav-icon.vg-pulsing { animation: none; }
}