/* ══════════════════════════════════════════════════════════════════
   WITCH ACADEMY · DESIGN TOKENS · V41.8 CLEANUP
   SINGLE SOURCE OF TRUTH — không khai báo token ở bất kỳ file nào khác.
   ══════════════════════════════════════════════════════════════════ */
:root {
  /* === COLOUR === */
  --wa-bg:            #F7F8FC;
  --wa-card:          #FFFFFF;
  --wa-surface:       #F1F2F8;
  --wa-surface-2:     #FAFAFD;
  --wa-primary:       #7C5CFF;
  --wa-secondary:     #A78BFA;
  --wa-primary-soft:  #F3F1FF;
  --wa-primary-border:#DAD2FF;
  --wa-border:        #ECECF2;
  --wa-border-strong: #DDDCE8;
  --wa-text:          #1E1B39;
  --wa-text-secondary:#4C4863;
  --wa-muted:         #7B7890;
  --wa-success:       #22C55E;
  --wa-warning:       #F59E0B;
  --wa-danger:        #EF4444;
  --wa-info:          #3B82F6;

  /* === RADIUS === */
  --wa-radius-xs: 7px;
  --wa-radius-sm: 9px;
  --wa-radius-md: 12px;
  --wa-radius-lg: 16px;
  --wa-radius-xl: 20px;
  --wa-radius-full: 9999px;

  /* === SHADOW === */
  --wa-shadow-sm: 0 4px 14px rgba(30,27,57,.035);
  --wa-shadow:    0 10px 28px rgba(30,27,57,.05);
  --wa-shadow-lg: 0 20px 54px rgba(30,27,57,.12);

  /* === SPACING === */
  --wa-space-1: 4px;
  --wa-space-2: 8px;
  --wa-space-3: 12px;
  --wa-space-4: 16px;
  --wa-space-5: 20px;
  --wa-space-6: 24px;
  --wa-space-8: 32px;
  --wa-space-10:40px;

  /* === TYPOGRAPHY === */
  --wa-font: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --wa-mono: "DM Mono", "SFMono-Regular", Consolas, monospace;

  /* === SIDEBAR DIMENSIONS === */
  --sidebar-w: 224px;
  --topbar-h: 62px;

  /* ── LEGACY ALIASES (cho code cũ dùng --bg, --card, --text …) ── */
  --bg:           var(--wa-bg);
  --card:         var(--wa-card);
  --surface:      var(--wa-surface);
  --surface-2:    var(--wa-surface-2);
  --border:       var(--wa-border);
  --text:         var(--wa-text);
  --text-2:       var(--wa-text-secondary);
  --muted:        var(--wa-muted);
  --primary:      var(--wa-primary);
  --primary-dim:  var(--wa-primary-soft);
  --primary-light:var(--wa-primary-soft);
  --success:      var(--wa-success);
  --warning:      var(--wa-warning);
  --danger:       var(--wa-danger);
  --shadow:       var(--wa-shadow);

  /* ── LEGACY SEMANTIC ALIASES (modules cũ: Channel / Hook / CTA) ── */
  --primary-soft: var(--wa-primary-soft);
  --success-soft: rgba(34,197,94,.10);
  --warning-soft: rgba(245,158,11,.10);
  --danger-soft:  rgba(239,68,68,.10);
  --blue:         var(--wa-info);
  --blue-soft:    rgba(59,130,246,.10);
  --orange:       var(--wa-warning);
  --red:          var(--wa-danger);

  /* ── LEGACY ALIASES: misc tokens từng khai báo inline ── */
  --font:         var(--wa-font);
  --font-mono:    var(--wa-mono);
  --space-md:     var(--wa-space-4);
  --border-hover: var(--wa-border-strong);
  --danger-bg:    rgba(239,68,68,.08);
  --muted-light:  var(--wa-surface);
  --primary-mid:  var(--wa-secondary);
  --radius:       var(--wa-radius-lg);
  --radius-sm:    var(--wa-radius-sm);
  --radius-md:    var(--wa-radius-md);
  --radius-full:  var(--wa-radius-full);
  --shadow-sm:    var(--wa-shadow-sm);
  --yt:           #FF0000;
  --tt:           #FE2C55;

  /* ── HR MODULE TOKENS (dùng trong hr-overview-v407.css) ── */
  --hrv407-accent: var(--wa-primary);
  --hrv407-tint:   var(--wa-primary-soft);
}

/* Mobile topbar height — canonical responsive token. */
@media (max-width: 768px) {
  :root { --topbar-h: 58px; }
}