/* ═══════════════════════════════════════════════════════════════════════════
   ChinaGuide — Design Tokens centralisés
   Fichier partagé entre le plugin wp-language-china-premium et le thème chinaguide.
   Lot 5 — Cohérence visuelle + UX gamifiée
   Inspiré de ThaïGuide/VietGuide, adapté à la palette China (rouge + or).
   ═══════════════════════════════════════════════════════════════════════════ */

: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(200,16,46,.18), 0 4px 16px rgba(200,16,46,.35);
  --sh-glow-gold:    0 0 0 3px rgba(255,215,0,.18),  0 4px 16px rgba(255,215,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 — ChinaGuide (Rouge + Or impérial) ────────────────── */
  --cg-bg: #1a0808;            /* Dark rouge très sombre */
  --cg-surface: #2A0E0E;       /* Surface sombre rouge sang */
  --cg-surface-2: #3a1414;     /* Surface élevée */
  --cg-text: #FFF8E7;          /* Crème riz — contraste sur fond sombre */
  --cg-muted: #c9a9a9;         /* Rose pâle pour texte secondaire */
  --cg-primary: #C8102E;       /* Rouge China — drapeau */
  --cg-primary-dk: #8B0000;    /* Rouge sang (hover / press) */
  --cg-primary-bg: #2A0E0E;    /* Noir rougeâtre (fond dark) */
  --cg-green: #16a34a;         /* Vert jade (succès) */
  --cg-red: #C8102E;           /* Rouge China (erreurs) */
  --cg-gold: #FFD700;          /* Or impérial (XP / trophées) */
  --cg-purple: #C9A227;        /* Or secondaire (accent Hué-like) */

  /* ── Palette modules unifiée (1 couleur = 1 module, partout) ────────────── */
  --mod-vocab: #C8102E;        /* Rouge China — vocabulaire */
  --mod-lessons: #FFD700;      /* Or — leçons */
  --mod-dialogues: #FFCD00;    /* Jaune étoile — dialogues */
  --mod-alphabet: #C8102E;     /* Rouge China — alphabet Hanzi */
  --mod-review: #E8735A;       /* Orange China — révision */
  --mod-stats: #FFD700;        /* Or — statistiques */
  --mod-stories: #C9A227;      /* Or impérial — histoires */
  --mod-niveau: #9D1B2D;       /* Rouge profond — examens de niveau */
  --mod-revision: #E8735A;     /* Orange China — révision SRS */

  /* ── Palette médailles HARMONISÉE ──────────────────────────────────────── */
  /* Référence : gradients SVG du plugin china-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, 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono: 'DM Mono', ui-monospace, monospace;

  /* ── Alias de compatibilité (pwa-shell.css utilise l'ancien nommage) ──── */
  /* Ancien design system China → nouveau design system ChinaGuide */
  --brand:        var(--cg-primary);       /* #C8102E */
  --brand-dark:   var(--cg-surface);       /* #2A0E0E */
  --brand-darker: var(--cg-surface-2);     /* #3a1414 */
  --brand-gold:   var(--cg-gold);          /* #FFD700 */
  --brand-green:  var(--cg-green);         /* #16a34a */
  --brand-orange: #e07c00;
  --brand-blue:   #2563eb;
  --brand-soft:   #7c3aed;
  --bg:           var(--cg-bg);            /* #1a0808 — dark par défaut */
  --card:         var(--cg-surface);       /* #2A0E0E */
  --card-2:       var(--cg-surface-2);     /* #3a1414 */
  --border:       #5C1010;
  --fg:           var(--cg-text);          /* #FFF8E7 */
  --text:         var(--cg-text);          /* alias */
  --muted:        var(--cg-muted);         /* #c9a9a9 */
  --muted-2:      #a18a8a;
  --accent:       var(--cg-primary);
  --accent-soft:  rgba(200,16,46,.18);
  --ok:           var(--cg-green);
  --ok-soft:      rgba(22,163,74,.12);
  --warn:         #e07c00;
  --warn-soft:    rgba(224,124,0,.12);
  --err:          #dc2626;
  --err-soft:     rgba(220,38,38,.12);
  --dark-bg:      var(--cg-bg);
  --dark-card:    var(--cg-surface);
  --dark-card-2:  var(--cg-surface-2);
  --dark-border:  rgba(255,255,255,.12);
  --dark-fg:      var(--cg-text);
  --dark-muted:   var(--cg-muted);
  --sh-sm:  var(--sh-1);
  --sh-md:  var(--sh-2);
  --sh-lg:  var(--sh-3);
  --r-full: var(--r-pill);
  --z-header: var(--z-sticky);
  --z-tabs:   90;
  --z-bottom: var(--z-sticky);
  --app-max-width: 1100px;
  --header-h:    56px;
  --bottomnav-h: 64px;
}

/* Mode dark explicite — appliqué par défaut sur .wplc6p-app */
.wplc6p-app {
  background: var(--cg-bg);
  color: var(--cg-text);
}

/* ═══════════════════════════════════════════════════════════════════════════
   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) ──────────────────────────────── */
.wplc6p-btn, .demo-btn {
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-instant) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.wplc6p-btn:active, .demo-btn:active {
  transform: translateY(2px) scale(.97);
  border-bottom-width: 1px;
}
.wplc6p-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;
}
.wplc6p-btn.is-rippling::after, .demo-btn.is-rippling::after {
  animation: cg-ripple .5s var(--ease-out);
}
@keyframes cg-ripple {
  0%   { width: 0; height: 0; opacity: .5; }
  100% { width: 320px; height: 320px; opacity: 0; }
}

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

/* ── Gain XP : burst doré qui s'envole ───────────────────────────────────── */
@keyframes cg-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; }
}
.cg-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: cg-xp-burst 1s var(--ease-bounce) forwards;
}

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

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

/* ── Bottom-nav : pulse du bouton central (Révision) ─────────────────────── */
@keyframes cg-bnav-pulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(200,16,46,.55), 0 0 0 0 rgba(200,16,46,.6); }
  50%      { box-shadow: 0 6px 20px rgba(200,16,46,.55), 0 0 0 12px rgba(200,16,46,0); }
}
.wplc6p-bnav-c4 .wplc6p-bnav-icon.cg-pulsing {
  animation: cg-bnav-pulse 2.4s var(--ease-out) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .wplc6p-bnav-c4 .wplc6p-bnav-icon.cg-pulsing { animation: none; }
}