/* ==========================================================================
   tokens.css - Fonte única de verdade visual do Sistema Learn.

   Paleta do protótipo "Learn Language v2": teal como acento de interação,
   navy como tinta de títulos, papel frio (#f2f5f6) e semânticas
   verde/âmbar/vermelho/violeta.

   Regra de ouro: nenhum outro arquivo CSS declara cor, família tipográfica
   ou raio de borda literal. Tudo consome var(--learn-*) daqui.

   Dois acentos com papéis distintos:
     --learn-accent      (teal)      → interação: botões, links, foco, progresso
     --learn-accent-warm (por idioma) → conteúdo: ênfase editorial em material de estudo
   ========================================================================== */

:root {
    /* ===== superfícies ===== */
    --learn-paper:     #f2f5f6;   /* fundo da página */
    --learn-surface:   #ffffff;   /* cartão principal */
    --learn-surface-2: #fafcfc;   /* faixa alternada, blocos internos */

    /* ===== tinta ===== */
    --learn-ink:   #22323b;       /* texto principal */
    --learn-ink-2: #51636e;       /* texto secundário */
    --learn-muted: #8397a2;       /* apoio, legendas, ícones neutros */
    --learn-navy:  #123a4c;       /* títulos e cabeçalhos */

    /* ===== linhas ===== */
    --learn-line:        #e2e8ea; /* borda de cartão, divisor padrão */
    --learn-line-2:      #edf1f2; /* divisor leve */
    --learn-line-strong: #c9d4d8; /* borda de controle (input, botão neutro) */

    /* ===== acento de interação (teal) ===== */
    --learn-accent:      #0e7c86;
    --learn-accent-2:    #0a5d65;
    --learn-accent-soft: #e3f2f3;
    --learn-accent-line: #bcdfe2;

    /* ===== acento de conteúdo (varia por idioma) =====
       Ênfase editorial em material de estudo. Nunca em elemento clicável. */
    --learn-accent-warm:      #b8533e;
    --learn-accent-warm-2:    #8e3d2c;
    --learn-accent-warm-soft: #f7e9e3;

    /* ===== apoio editorial ===== */
    --learn-olive:      #6b7140;
    --learn-olive-2:    #4e5230;
    --learn-olive-soft: #eef0e4;
    --learn-gold:       #b97d10;
    --learn-gold-soft:  #fbf1dc;

    /* ===== marcos e simulados ===== */
    --learn-violet:      #6b4fbb;
    --learn-violet-2:    #57409a;
    --learn-violet-soft: #ece7f9;
    --learn-violet-line: #d5c9ef;

    /* ===== semânticas ===== */
    --learn-good:      #1d8a4e;
    --learn-good-2:    #156b3c;
    --learn-good-soft: #e2f3e9;
    --learn-good-line: #b7dfc8;
    --learn-warn:      #b97d10;
    --learn-warn-soft: #fbf1dc;
    --learn-warn-line: #efdcb0;
    --learn-err:       #c23b3b;
    --learn-err-soft:  #fbe9e9;
    --learn-err-line:  #f0bcbc;

    /* ===== raios ===== */
    --learn-radius-sm:   9px;
    --learn-radius:      12px;
    --learn-radius-lg:   14px;
    --learn-radius-pill: 999px;

    /* ===== sombras ===== */
    --learn-shadow-card:  0 1px 2px rgba(18, 58, 76, .06), 0 10px 30px -18px rgba(18, 58, 76, .25);
    --learn-shadow-hover: 0 4px 12px rgba(14, 124, 134, .12), 0 18px 48px -12px rgba(14, 124, 134, .30);
    --learn-shadow-lift:  0 4px 12px rgba(18, 58, 76, .12), 0 18px 48px -12px rgba(18, 58, 76, .30);

    /* ===== tipografia - três papéis =====
       display   → títulos e cabeçalhos (serifada)
       font      → corpo, UI, botões
       mono      → tabelas de conjugação, formas verbais isoladas */
    /* 'Segoe UI Variable Text' (Windows 11) antes da Segoe UI estática:
       eixo óptico ajustado para texto de interface - renderização mais
       suave em tamanhos pequenos. Nos demais sistemas, cai na pilha usual. */
    --learn-font-display: Georgia, 'Times New Roman', serif;
    --learn-font:         'Segoe UI Variable Text', 'Segoe UI', system-ui,
                          -apple-system, BlinkMacSystemFont,
                          Roboto, 'Helvetica Neue', Arial, sans-serif;
    --learn-font-mono:    ui-monospace, SFMono-Regular, Consolas, Menlo, monospace;

    /* ===== pesos tipográficos =====
       body   → corpo e textos de apoio
       medium → ênfase, rótulos, badges, pills - teto da UI sans-serif
                (Segoe UI Semibold; o Bold 700 em corpo pequeno pesa demais)
       bold   → títulos display (serifada) e raros destaques grandes.
       A Segoe UI não tem peso 800: qualquer valor acima de 700 degrada para
       Black (900) e o texto "estoura". Nunca declarar 800/900. */
    --learn-weight-body:   400;
    --learn-weight-medium: 600;
    --learn-weight-bold:   700;
}

/* ==========================================================================
   Acento de conteúdo por idioma.
   ÚNICA primitiva que varia entre idiomas. Tipografia, papel, semânticas,
   raio, componentes e layout são idênticos nos quatro.
   O acento de INTERAÇÃO (--learn-accent, teal) nunca muda.

   A classe vem da coluna `idioma.sigla`, aplicada no <body> por layout.html.
   ========================================================================== */
.lang-it { --learn-accent-warm: #b8533e; --learn-accent-warm-2: #8e3d2c; --learn-accent-warm-soft: #f7e9e3; }
.lang-en { --learn-accent-warm: #3f6151; --learn-accent-warm-2: #2d4639; --learn-accent-warm-soft: #e6ece8; }
.lang-es { --learn-accent-warm: #b07d20; --learn-accent-warm-2: #855d16; --learn-accent-warm-soft: #f7efdc; }
.lang-fr { --learn-accent-warm: #7a3b52; --learn-accent-warm-2: #5a2b3c; --learn-accent-warm-soft: #f4e8ed; }