/*
 * Mente Operacional Academy: tokens do app.
 *
 * Fonte de verdade da marca:
 *   dominios/wellington/marca/IDENTIDADE-VISUAL-EUSOUWELLS-v1.md (v1.3, 2026-10-05)
 *
 * Cada valor traz a origem no comentário:
 *   [ID §x]     vem da identidade visual, seção x. Não mudar sem mudar a identidade.
 *   [PROPOSTA]  escolha do protótipo de 2026-10-07. A identidade não define; vale até
 *               o Wellington aprovar ou trocar. Lista completa em
 *               _docs/design/inicio-membro/decisao.md.
 *
 * Regra do app (herdada do molde DNC): só este arquivo tem cor, fonte e
 * medida literal. base.css e as telas usam var(--am-*). Hex fora daqui é regressão.
 *
 * Breakpoint único do app: 768px (media query não aceita var(); está escrito à mão em
 * base.css, sempre o mesmo número).
 */

/* ---- fontes -------------------------------------------------------------- */
/* Space Grotesk servida daqui desde 2026-10-18 (escolha 9a: o Google recebia o endereço de
   rede do aluno em toda página). Os mesmos woff2 variáveis (pesos 500 a 700) que o painel MO
   serve (dominios/empresa/cockpit/web/public/fontes/), licença OFL em ../fontes/space-grotesk-OFL.txt
   (cópia de dominios/wellington/marca/fontes/). Dois arquivos por faixa de caracteres. */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fontes/space-grotesk-latin.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: "Space Grotesk";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fontes/space-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter: os mesmos woff2 que o Editor Acadêmico serve em produção (pt-BR, com acento).
   JetBrains Mono: TTF da pasta canvas-fonts da skill ui-ux-pro-max (licença OFL ao lado). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fontes/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fontes/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fontes/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fontes/inter-700.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fontes/jetbrains-mono-400.ttf") format("truetype");
}

:root {
  color-scheme: light;

  /* ---- paleta da marca ------------------------------------------------- */
  --am-grafite: #1c1c1e;          /* [ID §2.1] texto em fundo claro, barras de navegação */
  --am-laranja: #e8712a;          /* [ID §2.1] botão e destaque. 10 a 15% da área, nunca dominante */
  --am-branco-areia: #f7f7f5;     /* [ID §2.1] fundo claro principal */
  --am-terracota: #b85c38;        /* [ID §2.2] bordas, separadores, hover */
  --am-cinza-pedra: #a3a3a0;      /* [ID §2.2] texto auxiliar no escuro, bordas sutis */
  --am-areia: #e8dcc8;            /* [ID §2.2] fundo alternativo quente, bloco de destaque suave */
  --am-verde-resultado: #2d8c5a;  /* [ID §2.3] só validação/sucesso (o check de aula feita) */
  --am-verde-terminal: #8fbf4a;   /* [ID §2.3] só contexto técnico sobre Grafite. Não usado nas 2 telas */
  --am-branco: #ffffff;           /* [ID §2.5, §9.4] texto do botão laranja; fundo de card */

  /* ---- papéis (o que as telas usam) ------------------------------------- */
  --am-fundo: var(--am-branco-areia);         /* [ID §2.5] modo claro: fundo Branco Areia */
  --am-superficie: var(--am-branco);          /* [ID §9.4] card com fundo Branco e borda 1px Cinza Pedra */
  --am-superficie-quente: var(--am-areia);    /* [ID §2.5] seção destaque */
  --am-superficie-escura: var(--am-grafite);  /* [ID §2.1] barra lateral, topo, abas */

  --am-texto: var(--am-grafite);              /* [ID §2.6] texto corrido sempre Grafite */
  /* [PROPOSTA] texto secundário. A identidade manda legenda em Cinza Pedra, mas medido em
     2026-10-07 o Cinza Pedra dá 2,36:1 sobre o Branco Areia (reprova). Esta mistura sai do
     próprio Grafite e dá ~6:1 sobre Branco Areia e ~6,5:1 sobre Branco. */
  --am-texto-2: color-mix(in srgb, var(--am-grafite) 70%, var(--am-branco-areia));
  --am-texto-inverso: var(--am-branco-areia);   /* [ID §2.5] modo escuro */
  --am-texto-inverso-2: var(--am-cinza-pedra);  /* [ID §2.2] 6,7:1 sobre Grafite: aqui o Cinza Pedra passa */

  --am-acento: var(--am-laranja);               /* [ID §2.5] CTA */
  --am-acento-hover: var(--am-terracota);       /* [ID §2.2] "hover" é função listada do Terracota */
  --am-acento-texto: var(--am-branco);          /* [ID §2.5] CTA: Laranja com texto Branco */
  --am-sucesso: var(--am-verde-resultado);      /* [ID §2.3] check marks */
  /* [PROPOSTA, 2026-10-08] a identidade não tem cor de erro. Terracota só na BORDA e no ícone do
     aviso; o texto do aviso fica em --am-texto (Terracota sobre Branco Areia dá 4,23:1, reprova
     texto pequeno). Revisar quando o Wellington fechar a paleta do Mente Operacional. */
  --am-erro: var(--am-terracota);

  --am-borda: var(--am-cinza-pedra);            /* [ID §9.4] borda sutil de card */
  /* [PROPOSTA] divisória entre linhas dentro do card: o Cinza Pedra cheio pesava. */
  --am-borda-suave: color-mix(in srgb, var(--am-cinza-pedra) 40%, transparent);
  /* [PROPOSTA] borda de campo de formulário: controle precisa de 3:1 e o Cinza Pedra dá 2,5:1. */
  --am-borda-campo: color-mix(in srgb, var(--am-grafite) 55%, var(--am-branco-areia));
  /* [PROPOSTA] anel de foco do teclado: Terracota dá 4,2:1 sobre Branco Areia, o Laranja 2,9:1. */
  --am-foco: var(--am-terracota);
  --am-foco-escuro: var(--am-laranja);          /* [PROPOSTA] foco sobre Grafite: 5,5:1 */

  /* ---- tipografia --------------------------------------------------------- */
  --am-fonte-display: "Space Grotesk", "Arial Black", sans-serif;     /* [ID §3.1] títulos, nome de produto */
  --am-fonte-corpo: "Inter", "Helvetica Neue", Arial, sans-serif;     /* [ID §3.1] corpo, UI, botão */
  --am-fonte-mono: "JetBrains Mono", "Courier New", monospace;        /* [ID §3.1] versão, arquivo, duração */

  /* Tamanhos: celular primeiro. base.css troca para os de computador a partir de 768px. */
  --am-t-h1: 2rem;          /* [ID §3.2] H1 mobile 32-40px (computador: --am-t-h1-largo) */
  --am-t-h1-largo: 3rem;    /* [ID §3.2] H1 web 48-64px */
  --am-t-h2: 1.5rem;        /* [ID §3.2] H2 mobile 24-28px */
  --am-t-h2-largo: 2rem;    /* [ID §3.2] H2 web 32-40px */
  --am-t-h3: 1.25rem;       /* [ID §3.2] H3 mobile 20-22px */
  --am-t-h3-largo: 1.5rem;  /* [ID §3.2] H3 web 24-28px */
  --am-t-corpo: 1rem;       /* [ID §3.2] body 15-18px */
  --am-t-botao: 1rem;       /* [ID §3.2] button 15-18px */
  --am-t-botao-primario: 1.1875rem; /* [DECISAO 2026-10-07, Wellington 1a] 19px em negrito no botão Laranja: Branco sobre Laranja dá 3,08:1, que só passa no WCAG AA como texto grande (>= 18,66px negrito). 1px acima da faixa do §3.2 de propósito */
  --am-t-legenda: 0.8125rem;/* [ID §3.2] caption 12-14px */
  --am-t-mono: 0.875rem;    /* [ID §3.2] code 13-15px */
  --am-t-selo: 0.75rem;     /* [PROPOSTA] selo 12px. O carrossel usa 11px [ID §9.3]; no app, 12px é o piso de leitura */
  --am-t-rotulo: 0.875rem;  /* [PROPOSTA] rótulo de campo e de aba, 14px */

  --am-peso-normal: 400;    /* [ID §3.2] */
  --am-peso-medio: 500;     /* [PROPOSTA] item de navegação inativo */
  --am-peso-semi: 600;      /* [ID §3.2] H2, H3, botão */
  --am-peso-forte: 700;     /* [ID §3.2] H1, selo [ID §9.3] */

  --am-linha-corpo: 1.6;    /* [ID §3.3] */
  --am-linha-titulo: 1.2;   /* [ID §3.3] */
  --am-linha-mono: 1.5;     /* [ID §3.3] */
  --am-letra-titulo: -0.02em; /* [ID §3.3] Space Grotesk apertado */
  --am-letra-caixa-alta: 0.08em; /* [PROPOSTA] "caixa alta espaçada" do carrossel [ID §9.3], valor meu */

  /* ---- espaço: base 8px ---------------------------------------------------- */
  --am-e-xs: 0.25rem;   /* [ID §5.1] 4px  ícone e rótulo */
  --am-e-sm: 0.5rem;    /* [ID §5.1] 8px  badge, linhas de lista */
  --am-e-md: 1rem;      /* [ID §5.1] 16px padding de card */
  --am-e-lg: 1.5rem;    /* [ID §5.1] 24px seção menor */
  --am-e-xl: 2rem;      /* [ID §5.1] 32px seção maior */
  --am-e-2xl: 3rem;     /* [ID §5.1] 48px bloco de página */
  --am-e-3xl: 4rem;     /* [ID §5.1] 64px */
  --am-e-4xl: 6rem;     /* [ID §5.1] 96px */

  --am-margem-celular: 1.25rem;  /* [ID §5.2] 20px de margem lateral no mobile */
  --am-margem-tablet: 2rem;      /* [ID §5.2] 32px */
  --am-largura-max: 70rem;       /* [ID §5.2] 1120px de conteúdo no desktop */
  --am-largura-coluna: 55rem;    /* [PROPOSTA] 880px: trilha e autoria, que são lista, não vitrine */
  --am-lateral: 15rem;           /* [PROPOSTA] 240px de barra lateral no computador */
  --am-topo: 4rem;               /* [PROPOSTA] 64px de barra de topo */
  --am-card-min: 20rem;          /* [PROPOSTA] 320px: largura mínima de um card da estante */
  --am-linha-max: 70ch;          /* [ID §3.3] parágrafo com no máximo 70 caracteres por linha */
  --am-texto-min: 8rem;          /* [PROPOSTA] texto de uma linha de lista não encolhe abaixo disso; abaixo, as ações descem */

  /* ---- forma ---------------------------------------------------------------- */
  --am-raio-selo: 3px;     /* [ID §9.3] selo com cantos de 3px */
  --am-raio: 8px;          /* [ID §9.4] botão com cantos de 8px (vale para campo e linha) */
  --am-raio-cartao: 12px;  /* [PROPOSTA] card um degrau acima do botão */
  --am-raio-pilula: 999px; /* [PROPOSTA] trilho da barra de progresso */
  --am-traco: 1px;         /* [ID §9.4] borda de card 1px */
  --am-traco-kicker: 4px;  /* [ID §9.3] barra vertical Laranja do kicker (4px no carrossel.css) */
  --am-traco-ativo: 3px;   /* [PROPOSTA] marca lateral do item ativo e da aula atual */
  --am-traco-foco: 2px;    /* [PROPOSTA] */

  /* [ID §10] sombra sutil: 2-4px de blur, 10% de opacidade */
  --am-sombra: 0 1px 3px color-mix(in srgb, var(--am-grafite) 10%, transparent);

  /* ---- ícone e toque ---------------------------------------------------------- */
  --am-icone: 24px;          /* [ID §8.1] padrão */
  --am-icone-inline: 20px;   /* [ID §8.1] junto de texto */
  --am-icone-traco: 2;       /* [ID §8.1] traço 2px (unidade do viewBox 24 do Lucide) */
  --am-toque: 44px;          /* [PROPOSTA] alvo mínimo de toque (diretriz Apple, igual ao molde DNC) */
  --am-barra-progresso: 6px; /* [PROPOSTA] espessura da barra de progresso */
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}