/*
 * 01_tokens.css — ONDA D · §15.1
 * ═══════════════════════════════════════════════════════════════════════════
 * A única camada onde existe um valor literal. Componente nenhum escreve hex,
 * px de espaçamento ou peso de fonte: tudo sai daqui. É o que permite o white
 * label do tenant trocar CINCO variáveis e o produto inteiro obedecer.
 *
 * DARK É O PADRÃO, e não é preferência de gosto: o aluno é motorista, muitas
 * vezes no pátio à noite, com o celular no brilho baixo para não ofuscar. O
 * tema claro existe para o pátio às duas da tarde e para o admin no escritório
 * — entra por `[data-theme="light"]`, nunca por `prefers-color-scheme`, porque
 * a decisão de tema é do produto e o certificado impresso é sempre claro.
 *
 * A MARCA DA PLATAFORMA é a Ellévu (docs/MARCA-ELLEVU.md, pacote do Gustavo de
 * 24/09/2026): tinta #211915, grafite #4C4C4C e menta #9FFFE2. Ela mora nos
 * tokens `--ellevu-*`, que o tenant NÃO sobrescreve: landing, console, e-mail,
 * logo e "powered by" são sempre Ellévu. O tenant sem marca própria
 * (`marca_hex` = Tenant::Paleta::PADRAO) vê a Ellévu inteira pelos cinco
 * papéis abaixo, que por padrão são a menta.
 *
 * O QUE O TENANT SOBRESCREVE (cinco papéis, emitidos pelo layout num
 * `<style nonce>` — §15.2, Tenant::Paleta):
 *   --cor-marca            cor da marca já ajustada ao tema (texto, ícone, borda)
 *   --cor-marca-forte      o preenchimento sólido: botão primário, barra cheia
 *   --cor-marca-suave      superfície tingida: chip, destaque, faixa
 *   --cor-marca-contraste  o texto que fica SOBRE o preenchimento (WCAG, §15.2)
 *   --cor-marca-tenue      o traço quase invisível: borda de foco, anel, régua
 *
 * O QUE O TENANT NÃO SOBRESCREVE, e o motivo (§15.1): fundos e neutros (são o
 * que garante que o texto se leia), as SEMÂNTICAS (aprovado/reprovado/descanso
 * são a língua do produto — "aprovado" roxo numa transportadora faz
 * certificado, relatório e suporte deixarem de falar a mesma língua), e toda a
 * régua de espaço, raio, tipografia e z-index.
 */

:root {
  color-scheme: dark;

  /* ── Marca Ellévu (plataforma) ──────────────────────────────────────────
     Os tokens da PLATAFORMA. O tenant nunca os troca: o logo da Ellévu é
     tinta, branco ou menta, jamais a cor do cliente (MARCA-APLICACAO.md §0).
     Menta nunca é texto, borda fina ou ícone sobre fundo claro (1,17:1): no
     claro ela só aparece como superfície, com tinta por cima. Para texto e
     ícone no claro existe a `--ellevu-menta-profunda`. */
  --ellevu-tinta: #211915;           /* primária, fundo do escuro, logo no claro */
  --ellevu-grafite: #4C4C4C;         /* neutro de apoio, divisor do "powered by" */
  --ellevu-menta: #9FFFE2;           /* acento: botão da plataforma, faixa, ícone */
  --ellevu-menta-profunda: #00764F;  /* menta legível no claro: 5,12:1 sobre #F5F3F1 */
  --ellevu-menta-nevoa: #E7FFF8;     /* superfície tingida no claro */
  --ellevu-menta-sombra: #30352E;    /* superfície tingida no escuro: menta sobre ela 10,68:1 */
  --ellevu-papel: #FFFFFF;
  --ellevu-logo: #FFFFFF;            /* wordmark e símbolo; tinta no tema claro */

  /* ── Neutros do tema escuro ─────────────────────────────────────────────
     Quentes, de propósito: são a tinta #211915 misturada com branco, então
     herdam o tom café da marca em vez do cinza azulado. Contrastes medidos
     (WCAG 2.x) na MARCA-APLICACAO.md §2.2. */
  --fundo: #211915;          /* o papel da página */
  --fundo-cartao: #2A221E;   /* cartão, tabela, lista */
  --fundo-elevado: #332B28;  /* modal, menu, linha em hover */
  --fundo-fundo: #3C3531;    /* poço: campo, trilho de medidor, code */
  --fundo-inverso: #F5F3F1;

  /* `--borda` é RÉGUA (divisória decorativa, sem exigência de contraste).
     `--borda-forte` é LIMITE DE CONTROLE — contorno de campo, de botão
     secundário, de caixa de seleção — e por isso é medido: ≥ 3:1 contra os
     quatro fundos, que é o que a WCAG 1.4.11 pede de componente.
     #8A827E: 4,59 / 4,14 / 3,68 / 3,19. */
  --borda: #49423F;
  --borda-forte: #8A827E;
  --borda-tenue: #2F2723;

  --texto: #F5F3F2;          /* 15,63:1 sobre --fundo */
  --texto-suave: #BCBAB9;    /* 8,94:1 sobre --fundo, 6,22:1 sobre o poço */
  --texto-tenue: #9B9794;    /* 5,97 fundo · 5,38 cartão · 4,78 elevado. NÃO sobre o poço (4,15) */
  --texto-inverso: #211915;

  /* ── Os cinco papéis do tenant (default: Ellévu) ────────────────────────── */
  /* No escuro `marca` e `forte` são a MESMA menta: 14,72:1 contra o fundo, e a
     tinta por cima do preenchimento dá os mesmos 14,72:1. O hover de link não
     muda a cor, muda o sublinhado (02_base.css). Estes valores são a tabela
     fixa `Tenant::Paleta::PAPEIS_ELLEVU`, que não passa pela derivação HSL:
     sem isso o clamp de luminosidade mudaria a menta do tenant sem marca. */
  --cor-marca: #9FFFE2;
  --cor-marca-forte: #9FFFE2;
  --cor-marca-suave: #30352E;      /* marca sobre suave: 10,68:1 */
  --cor-marca-contraste: #211915;
  --cor-marca-tenue: #35564B;      /* marca sobre tênue: 6,92:1 */

  /* ── Semânticas: a língua do produto. O tenant NÃO troca. ────────────────
     aprovado / reprovado / descanso são os três estados que o produto inteiro
     comunica, e por isso a marca fica fora do eixo verde-vermelho-âmbar.
     Depois da menta (revisão de design de 24/09): o verde de "aprovado" era
     #3dd68c (matiz 151) e o ciano do ritmo #38e1ff (189), os dois colados na
     menta (162), e as três cores brigavam na mesma tela. O aprovado foi para
     o verde-lima (matiz ~85, #A6DB5E: 10,63:1 sobre o fundo), o ritmo para o
     violeta (#B9A6FF, 8,20:1) e o "aguardando" saiu do azul-ardósia da
     paleta velha para um areia quente (#C9B8A6, 8,97:1). No claro, o
     aprovado #3E7A12 (4,75:1) deixou de ser gêmeo do #00764F da marca. */
  --cor-aprovado: #A6DB5E;
  --cor-aprovado-forte: #79B234;
  --cor-aprovado-suave: #26301A;
  --cor-aprovado-contraste: #172206;

  --cor-reprovado: #ff7b72;
  --cor-reprovado-forte: #cf3a32;
  --cor-reprovado-suave: #331519;
  --cor-reprovado-contraste: #ffffff;

  /* Bloqueio se chama "tema em descanso", é ÂMBAR e nunca vermelho (§15.3). */
  --cor-descanso: #ffc145;
  --cor-descanso-forte: #d99413;
  --cor-descanso-suave: #33240a;
  --cor-descanso-contraste: #1c1204;

  --cor-aguardando: #C9B8A6;
  --cor-aguardando-forte: #A8957F;
  --cor-aguardando-suave: #3A2F27;
  --cor-aguardando-contraste: #211915;

  /* Gamificação — o único lugar do violeta de apoio. */
  --cor-ritmo: #B9A6FF;
  --cor-ritmo-forte: #9B85F7;
  --cor-ritmo-suave: #2B2542;
  --cor-ritmo-contraste: #171031;

  --cor-pontos: #ffd166;
  --cor-pontos-forte: #d9a326;
  --cor-pontos-suave: #2e2409;
  --cor-pontos-contraste: #1c1404;

  /* ── Espaço · base 4, e nada fora da escala ─────────────────────────────── */
  --esp-0: 0;
  --esp-1: 0.25rem;   /*  4px */
  --esp-2: 0.5rem;    /*  8px */
  --esp-3: 0.75rem;   /* 12px */
  --esp-4: 1rem;      /* 16px */
  --esp-5: 1.25rem;   /* 20px */
  --esp-6: 1.5rem;    /* 24px */
  --esp-8: 2rem;      /* 32px */
  --esp-10: 2.5rem;   /* 40px */
  --esp-12: 3rem;     /* 48px */
  --esp-16: 4rem;     /* 64px */

  /* Respiro lateral da tela. Muda na media query, o resto do CSS não sabe. */
  --gutter: var(--esp-4);
  --largura-conteudo: 68rem;
  --largura-leitura: 38rem;   /* ~72 caracteres: texto legal, microcópia */

  /* ── Alvo de toque ──────────────────────────────────────────────────────
     44px é o piso da Apple; 48 é o daqui, porque o usuário está de luva e o
     caminhão treme. Nenhum controle interativo desce disso. */
  --alvo: 3rem;       /* 48px */
  --alvo-grande: 3.5rem;

  /* ── Raio ───────────────────────────────────────────────────────────────── */
  --raio-1: 0.375rem;
  --raio-2: 0.625rem;
  --raio-3: 0.875rem;
  --raio-4: 1.25rem;
  --raio-redondo: 999px;

  /* ── Sombra ─────────────────────────────────────────────────────────────
     No escuro a sombra quase não aparece; quem faz a elevação é a BORDA. Por
     isso toda sombra vem acompanhada de um contorno. */
  --sombra-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --sombra-2: 0 4px 12px rgb(0 0 0 / 0.45);
  --sombra-3: 0 12px 32px rgb(0 0 0 / 0.55);
  /* A sombra colorida sai do `--cor-marca-forte` DO TENANT, e não de um hex
     fixo: fixa na menta, o botão laranja da Expresso Jataí ganhava um halo
     verde (revisão de design de 24/09). O tema do tenant troca o `-forte` no
     mesmo elemento, e o `var()` é resolvido ali. */
  --sombra-marca: 0 6px 20px color-mix(in srgb, var(--cor-marca-forte) 16%, transparent);

  /* ── Tipografia ─────────────────────────────────────────────────────────
     UMA webfont, DOIS pesos, SÓ em títulos e números: Plus Jakarta Sans 600 e
     700, subconjunto latin, auto-hospedada (cerca de 2 x 12 KB, @font-face no
     fim deste arquivo). O CORPO continua na pilha do sistema: o aluno está em
     4G ruim no pátio e texto de leitura não pode esperar fonte nenhuma. Com
     `font-display: swap` o título aparece na hora na pilha do sistema e troca
     quando a fonte chega. Números tabulares em tudo que é placar, prazo e
     contagem. */
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-titulo: "Plus Jakarta Sans", var(--fonte);
  /* O espaço da Plus Jakarta Sans é estreito (~0,18em) e, com o
     `--espacamento-titulo` negativo, "Próxima lição" virava "Próximalição" a
     1x no celular (print da integração). Um respiro entre palavras SÓ onde a
     fonte de título entra. */
  --espaco-palavra-titulo: 0.08em;
  --fonte-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;

  --texto-xs: 0.75rem;    /* 12 — só rótulo de selo e legenda */
  --texto-sm: 0.875rem;   /* 14 */
  --texto-md: 1rem;       /* 16 — corpo. É também o piso de input (iOS) */
  --texto-lg: 1.125rem;   /* 18 */
  --texto-xl: 1.375rem;   /* 22 */
  --texto-2xl: 1.75rem;   /* 28 */
  --texto-3xl: 2.25rem;   /* 36 */
  --texto-4xl: 3rem;      /* 48 — número grande do painel */

  --peso-normal: 400;
  --peso-medio: 550;
  --peso-forte: 700;

  --altura-apertada: 1.15;
  --altura-normal: 1.5;
  --altura-solta: 1.65;

  --espacamento-titulo: -0.015em;
  --espacamento-etiqueta: 0.06em;

  /* ── Movimento ──────────────────────────────────────────────────────────── */
  --transicao-rapida: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --transicao: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transicao-lenta: 360ms cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Camadas ────────────────────────────────────────────────────────────── */
  --z-base: 0;
  --z-grudado: 10;      /* cabeçalho e navegação inferior */
  --z-menu: 100;
  --z-faixa: 150;       /* faixa de "entrar como" (§12.5) */
  --z-modal-fundo: 200;
  --z-modal: 210;
  --z-aviso: 300;       /* flash */

}

/* ═══════════════════════════════════════════════════════════════════════════
   TEMA CLARO — completo, não um remendo.
   Só os tokens mudam: nenhum componente tem regra `[data-theme]`.
   ═══════════════════════════════════════════════════════════════════════════ */
/* O seletor é de ATRIBUTO, não `:root[…]`: assim um contêiner qualquer pode
   carregar `data-theme="light"` e virar uma ilha clara dentro da página
   escura. É o que faz a prévia da marca em /admin/marca e o catálogo /estilo
   mostrarem os dois temas lado a lado sem duplicar uma linha de CSS. */
[data-theme="light"] {
  color-scheme: light;

  /* O logo da Ellévu no claro é tinta (MARCA-ELLEVU.md §3). */
  --ellevu-logo: #211915;

  --fundo: #F5F3F1;          /* papel quente */
  --fundo-cartao: #FFFFFF;
  --fundo-elevado: #FFFFFF;
  --fundo-fundo: #ECE8E5;
  --fundo-inverso: #211915;

  --borda: #E0DBD7;
  --borda-forte: #857D79;    /* 3,64 / 4,03 / 3,31 */
  --borda-tenue: #EDEAE7;

  --texto: #211915;          /* 15,62 / 17,29 */
  --texto-suave: #4C4C4C;    /* o grafite da marca: 7,76 / 8,59 */
  --texto-tenue: #6A625E;    /* 5,39 / 5,96 / 4,90 */
  --texto-inverso: #FFFFFF;

  /* No claro o botão primário é VERDE, não menta: o `forte` também vira
     borda, hover, medidor e accent-color, e precisa de 3:1 contra o fundo.
     Menta sobre branco dá 1,17:1. A menta cheia continua viva no claro pela
     classe de plataforma `.botao--ellevu`. */
  --cor-marca: #00764F;            /* 5,12:1 sobre o fundo */
  --cor-marca-forte: #006847;      /* 6,18:1 sobre o fundo; branco sobre ele 6,84:1 */
  --cor-marca-suave: #E7FFF8;      /* marca sobre suave: 5,41:1 */
  --cor-marca-contraste: #FFFFFF;
  --cor-marca-tenue: #D2F7EB;      /* marca sobre tênue: 4,93:1 */

  --cor-aprovado: #3E7A12;
  --cor-aprovado-forte: #3E7A12;
  --cor-aprovado-suave: #EAF3DD;
  --cor-aprovado-contraste: #ffffff;

  --cor-reprovado: #c62f28;
  --cor-reprovado-forte: #c62f28;
  --cor-reprovado-suave: #fde8e6;
  --cor-reprovado-contraste: #ffffff;

  --cor-descanso: #8a5600;
  --cor-descanso-forte: #9c6200;
  --cor-descanso-suave: #fdf0d5;
  --cor-descanso-contraste: #ffffff;

  --cor-aguardando: #6B5A4B;
  --cor-aguardando-forte: #6B5A4B;
  --cor-aguardando-suave: #F1EAE3;
  --cor-aguardando-contraste: #ffffff;

  --cor-ritmo: #5B45C2;
  --cor-ritmo-forte: #5B45C2;
  --cor-ritmo-suave: #EEEAFC;
  --cor-ritmo-contraste: #ffffff;

  --cor-pontos: #7a5600;
  --cor-pontos-forte: #7a5600;
  --cor-pontos-suave: #fbf0d3;
  --cor-pontos-contraste: #ffffff;

  --sombra-1: 0 1px 2px rgb(33 25 21 / 0.07);
  --sombra-2: 0 4px 12px rgb(33 25 21 / 0.09);
  --sombra-3: 0 12px 32px rgb(33 25 21 / 0.14);
  --sombra-marca: 0 6px 20px color-mix(in srgb, var(--cor-marca-forte) 18%, transparent);
}

/* ── Apelidos de compatibilidade ──────────────────────────────────────────
   As ondas A, B e C escreveram as folhas 30/40/50 antes de este arquivo
   existir e programaram contra nomes que eu não usei — cada `var()` delas
   tem um FALLBACK literal, então nada quebra, mas sem estas linhas a tela de
   login e o player ficariam com a paleta CHUMBADA e parariam de obedecer ao
   white label do tenant, que é justamente o ponto de haver tokens.
   Apelido é de graça em CSS e é a forma honesta de fechar o buraco sem
   editar arquivo de outra onda. A dívida está no relatório: quando elas
   trocarem os nomes pelos canônicos, este bloco inteiro sai.

   O mapa de espaçamento NÃO é um para um, e é isso que importa aqui: a
   escala delas é 0.25/0.5/1/1.5/2rem, a minha é de base 4 e vai de 1 a 16.
   `--espaco-3` é 1rem, ou seja `--esp-4`. Traduzir errado encolheria meia
   tela do cadastro. */
/* A regra vale para `:root` E para qualquer ilha `[data-theme]`: apelido
   declarado só em `:root` é substituído pelo valor do tema de LÁ e não
   reacompanha o tema do contêiner — o token da ilha clara chegaria escuro. */
:root,
[data-theme] {
  --espaco-1: var(--esp-1);   /* 0.25rem */
  --espaco-2: var(--esp-2);   /* 0.5rem  */
  --espaco-3: var(--esp-4);   /* 1rem    */
  --espaco-4: var(--esp-6);   /* 1.5rem  */
  --espaco-5: var(--esp-8);   /* 2rem    */

  --raio-cheio: var(--raio-redondo);

  --cor-borda: var(--borda);
  --cor-tenue: var(--borda);
  --cor-superficie: var(--fundo-cartao);
  --cor-superficie-2: var(--fundo-elevado);
  --cor-fundo-elevada: var(--fundo-elevado);
  --cor-texto-suave: var(--texto-suave);
  --cor-contraste: var(--texto);

  --cor-aprovado-tenue: var(--cor-aprovado-suave);
  --cor-reprovado-tenue: var(--cor-reprovado-suave);
  --cor-aguardando-tenue: var(--cor-aguardando-suave);
}

/* A folha do certificado é papel: sempre clara, em qualquer tema (§11.3). */
.corpo--certificado {
  color-scheme: light;
}

@media (min-width: 48rem) {
  :root { --gutter: var(--esp-6); }
}

@media (min-width: 64rem) {
  :root { --gutter: var(--esp-8); }
}

/* ── Plus Jakarta Sans (títulos e números) ────────────────────────────────
   Auto-hospedada em app/assets/fonts/ (licença OFL em OFL.txt): nada de
   Google Fonts, porque a CSP é `font-src 'self'` e porque um terceiro no
   caminho crítico é meio segundo a mais no 4G do pátio. `url()` relativo: o
   Propshaft reescreve com o digest. O subconjunto latin (U+0000-00FF) cobre
   todos os acentos do português. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/plus-jakarta-sans-latin-600-normal-2083110d.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/plus-jakarta-sans-latin-700-normal-62297489.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}