/* ===========================================================================
   ModulosPlayV2 — Camada de ALIAS sobre o design system "Modulos Play".
   ---------------------------------------------------------------------------
   foundation.css (kit ModulosPlay New) é a fonte real de tokens, com tema
   claro + escuro. Este arquivo só MAPEIA os nomes de token usados pelo nosso
   código legado (--action, --bg-elevated, --purple, --fs-h1, ...) para os
   tokens semânticos do kit. Como tudo aponta via var(), o app inteiro
   re-skina e segue claro/escuro automaticamente — sem tocar componentes.

   Carregar APÓS foundation.css. Não redefinir nomes que o kit já define
   (--bg, --border, --text, --text-muted, --space-*, --radius-sm/md/lg,
   --shadow-*, --success, --lh-*): esses passam direto do kit.
   =========================================================================== */

:root {
  /* ── Cores de ação (nossos nomes → semânticos do kit) ──────────────────
     Kit: teal = ação/play/progresso (--accent); navy = estrutura (--primary).
     CTA primário é TEAL por decisão do kit. */
  --action:        var(--primary);
  --action-hover:  var(--primary-hover);
  --progress:      var(--primary);
  --progress-soft: var(--primary-tint);

  --success-soft:  var(--success-tint);
  --danger-soft:   var(--danger-tint);

  --highlight:     var(--warning);
  --attention:     var(--warning);
  --highlight-soft: var(--warning-tint);

  /* ── Marca legada (purple/teal/pink/etc.) → nova paleta ───────────────── */
  --purple:        var(--primary);
  --purple-light:  var(--primary-hover);
  --teal:          var(--primary);
  --teal-light:    var(--primary-hover);
  --pink:          var(--danger);
  --orange:        var(--warning);
  --yellow:        var(--warning);
  --green:         var(--success);
  --red:           var(--danger);

  /* ── Superfícies / texto legados → superfícies do kit ─────────────────── */
  --bg-elevated:    var(--surface);
  --bg-surface:     var(--surface-2);
  --bg-2:           var(--surface-2);
  --bg-3:           var(--surface-3);
  --text-primary:   var(--text);
  --text-secondary: var(--text-muted);
  --text-faint:     var(--text-subtle);
  --border-dim:     var(--border);

  /* ── Raio: kit usa --radius-pill; nosso código usa --radius-full ──────── */
  --radius-full: var(--radius-pill);
  /* Botões e chips: squircle onde há corner-shape (Chrome/Android); no Safari/Firefox,
     canto arredondado comum e menor (o squircle de mesmo raio parece mais reto). */
  --radius-control: 12px;

  /* ── Tipografia: uma sans só (kit) p/ display e corpo ─────────────────── */
  --font-display: var(--font-sans);
  --font-body:    var(--font-sans);

  /* Escala: nossos --fs-* → escala do kit (--text-*) */
  --fs-display: var(--text-4xl);
  --fs-h1:      var(--text-3xl);
  --fs-h2:      var(--text-xl);
  --fs-h3:      var(--text-lg);
  --fs-body:    var(--text-md);
  --fs-caption: var(--text-xs);

  /* Pesos (kit não tokeniza peso — mantemos constantes coerentes) */
  --fw-display: 800;
  --fw-h1:      800;
  --fw-h2:      800;
  --fw-h3:      700;
  --fw-body:    400;
  --fw-medium:  500;
  --fw-strong:  600;

  /* Line-height extra usado pelo código legado (kit tem --lh-tight/snug/base) */
  --lh-body: var(--lh-base);

  /* ── Transições / easing (kit não tokeniza — mantemos as nossas) ──────── */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* folha de baixo, estilo iOS */
  --t-fast: 150ms;
  --t-base: 220ms;
  --t-slow: 480ms;
}

@supports (corner-shape: squircle) {
  :root { --radius-control: 18px; }
}