/* ═══════════════════════════════════════════════════════════
   tokens.css
   Variáveis de design compartilhadas entre as páginas de guia
   (postura, vocabulário, voz). Antes, cada uma repetia as
   mesmas cores em hexadecimal dezenas de vezes — se a marca
   mudar de cor um dia, dá pra trocar aqui uma vez só, em vez
   de caçar #6a3ea7 em 3 arquivos diferentes.

   Carregar ANTES do CSS específico de cada página.
   ═══════════════════════════════════════════════════════════ */

:root {
    /* Fallback antes do js/header-height.js medir a altura real do
       .top-header. É sobrescrito em runtime — não precisa bater 100%,
       só evitar um flash grande antes da primeira medição. */
    --header-height: 84px;
    /* Marca */
    --color-primary: #6a3ea7;
    --color-primary-light: #8b5fc7;
    --color-primary-dark: #4B2E83;
    --color-gold: #ffd700;

    /* Texto e superfícies (modo claro) */
    --color-text: #1f2937;
    --color-text-muted: #6b7280;
    --color-border: #e5e7eb;
    --color-surface-soft: #f9fafb;
    --color-white: #ffffff;

    /* Estados */
    --color-danger: #ef4444;
    --color-danger-dark: #dc2626;
    --color-success: #059669;
    --color-warning: #d97706;

    /* Forma */
    --radius-pill: 999px;
    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 8px;

    /* Sombra padrão de card e de botão primário */
    --shadow-card: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.03);
    --shadow-card-hover: 0 8px 20px rgba(106, 62, 167, 0.15);
    --shadow-primary-btn: 0 4px 12px rgba(106, 62, 167, 0.3);
}