/*
 * 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.
 *
 * 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 Elevô ────────────────────────────────────────────────────────
     Índigo-elétrico #4F6BFF é a marca institucional (§15.1). Nas superfícies
     escuras ele é escurecido demais para texto, então o papel `--cor-marca`
     sobe para a faixa de luminosidade legível e o #4F6BFF vira `-forte`,
     o preenchimento. Ciano de apoio SÓ em gamificação. */
  --elevo-indigo: #4f6bff;
  --elevo-indigo-claro: #8095ff;
  --elevo-indigo-escuro: #2f49d6;
  --elevo-ciano: #38e1ff;
  --elevo-tinta: #090c12;   /* o preto de referência do cálculo de contraste */
  --elevo-papel: #ffffff;

  /* ── Neutros do tema escuro ─────────────────────────────────────────────
     Azulados de propósito: cinza neutro sob a luz amarela de posto parece
     sujo, e a tela do caminhão quase sempre está com filtro de luz azul. */
  --fundo: #0b0e14;          /* o papel da página */
  --fundo-cartao: #131925;   /* cartão, tabela, lista */
  --fundo-elevado: #1b2231;  /* modal, menu, linha em hover */
  --fundo-fundo: #232c3e;    /* poço: campo, trilho de medidor, code */
  --fundo-inverso: #f2f5fa;

  /* `--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. */
  --borda: #2b344a;
  --borda-forte: #6b7793;
  --borda-tenue: #1e2634;

  --texto: #f2f5fa;
  --texto-suave: #b3bed1;    /* 9.4:1 sobre --fundo */
  --texto-tenue: #8d9ab1;    /* 6.2:1 sobre --fundo — rótulo, legenda, meta */
  --texto-inverso: #0b0e14;

  /* ── Os cinco papéis do tenant (default: Elevô) ─────────────────────────── */
  /* O preenchimento NÃO é o #4F6BFF cru: branco sobre #4F6BFF dá 4,30:1 e
     rótulo de botão é texto normal, que precisa de 4,5:1. Um degrau de
     luminosidade abaixo (#4462F2) resolve sem sair do índigo-elétrico —
     medido em 4,91:1. O #4F6BFF continua sendo a marca em `--elevo-indigo`. */
  --cor-marca: #8095ff;
  --cor-marca-forte: #4462f2;
  --cor-marca-suave: #1c2444;
  --cor-marca-contraste: #ffffff;
  --cor-marca-tenue: #2a3566;

  /* ── 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. */
  --cor-aprovado: #3dd68c;
  --cor-aprovado-forte: #22a86a;
  --cor-aprovado-suave: #0e2b22;
  --cor-aprovado-contraste: #04170f;

  --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: #9fb0c9;
  --cor-aguardando-forte: #8494ad;
  --cor-aguardando-suave: #1c2330;
  --cor-aguardando-contraste: #0b0e14;

  /* Gamificação — o único lugar do ciano de apoio. */
  --cor-ritmo: #38e1ff;
  --cor-ritmo-forte: #12a8c9;
  --cor-ritmo-suave: #082630;
  --cor-ritmo-contraste: #04161c;

  --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);
  --sombra-marca: 0 6px 20px rgb(79 107 255 / 0.28);

  /* ── Tipografia ─────────────────────────────────────────────────────────
     Pilha do sistema, ZERO webfont: o aluno está em 4G ruim no pátio e uma
     fonte de 90 KB é meio segundo de texto invisível. Números tabulares em
     tudo que é placar, prazo e contagem. */
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --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;

  --fundo: #f4f6fb;
  --fundo-cartao: #ffffff;
  --fundo-elevado: #ffffff;
  --fundo-fundo: #eceff6;
  --fundo-inverso: #0b0e14;

  --borda: #d5dbe8;
  --borda-forte: #6f788e;
  --borda-tenue: #e6eaf2;

  --texto: #101726;
  --texto-suave: #414d63;    /* 8.4:1 sobre #f4f6fb */
  --texto-tenue: #5a6880;    /* 5.5:1 sobre #f4f6fb */
  --texto-inverso: #ffffff;

  /* Clamp de luminosidade do tema claro (§15.2: L ∈ [0.35, 0.52]). */
  --cor-marca: #3450e0;
  --cor-marca-forte: #2f49d6;
  --cor-marca-suave: #e6eaff;
  --cor-marca-contraste: #ffffff;
  --cor-marca-tenue: #c3ccfb;

  --cor-aprovado: #0f7a51;
  --cor-aprovado-forte: #0f7a51;
  --cor-aprovado-suave: #dff5ea;
  --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: #4d5b73;
  --cor-aguardando-forte: #4d5b73;
  --cor-aguardando-suave: #e8ecf3;
  --cor-aguardando-contraste: #ffffff;

  --cor-ritmo: #0b6f88;
  --cor-ritmo-forte: #0b6f88;
  --cor-ritmo-suave: #dcf1f7;
  --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(16 23 38 / 0.07);
  --sombra-2: 0 4px 12px rgb(16 23 38 / 0.09);
  --sombra-3: 0 12px 32px rgb(16 23 38 / 0.14);
  --sombra-marca: 0 6px 20px rgb(47 73 214 / 0.18);
}

/* ── 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); }
}