/* Tokens do PV Concursos.
 *
 * A paleta e a tipografia vieram do protótipo da página inicial feito no
 * Claude Design em 03/09/2026, guardado em
 * `docs/UI mockups for C.O.R.A./design_handoff_pvconcursos_home/`, e adotado
 * pelo autor no mesmo dia. Este arquivo é só o vocabulário: cor, tipografia,
 * raio e sombra. Não há layout aqui, e a concha é do `concha.css`.
 *
 * Duas coisas a saber sobre a paleta.
 *
 * O acento laranja, `--acento`, é o segundo acento do sistema, e a decisão 10
 * fala em "sistema visual de um acento só". O autor escolheu as cores do
 * protótipo sabendo disso, e a emenda à decisão é dele. Aqui o laranja tem um
 * papel só: o botão da ação principal da tela. Tudo o mais é azul petróleo.
 *
 * O `--brand-fundo` existe separado do `--brand` porque no tema escuro o
 * azul que serve de texto e de link precisa clarear, e o azul que serve de
 * fundo pintado, como a seção da questão de amostra, precisa ficar escuro.
 *
 * O `--rail: 232px` do protótipo antigo continua fora: o item E.1 proíbe a
 * trilha lateral, e o layout é coluna única a partir de 360 px.
 *
 * As fontes são declaradas em `fontes.css`, servidas da própria casa, e as
 * pilhas abaixo trazem a reserva do sistema atrás, para a primeira pintura.
 *
 * O padrão é o claro do protótipo, idêntico, e não segue o tema do sistema.
 * Decisão do autor em 03/09/2026: "o padrão tem que ser idêntico ao que te
 * mostrei". Por isso não há consulta a `prefers-color-scheme` aqui. O bloco
 * `[data-theme="dark"]` fica declarado para o dia em que o aluno puder escolher
 * o escuro em configurações, e até lá nenhuma view o liga.
 */

:root {
  --bg:          #F6F4F0;
  --surface:     #FFFFFF;
  --surface-2:   #FBFAF8;
  --line:        #12262B1F;
  --line-2:      #12262B33;
  /* As linhas do protótipo, na opacidade em que ele as desenha: .08 nas
   * linhas de lista, .10 nos divisores, .14 e .16 nos cartões e campos, .25
   * no tracejado da foto. O nome carrega o número porque é assim que o mock
   * as distingue, e um nome semântico esconderia a diferença. */
  --line-08:     #12262B14;
  --line-10:     #12262B1A;
  --line-14:     #12262B24;
  --line-16:     #12262B29;
  --line-25:     #12262B40;
  --linha-clara: #FFFFFF26;
  --text:        #12262B;
  --text-2:      #5A6E73;
  --text-3:      #8A9A9E;
  /* Grupo B da inspeção no Chrome, 30/09/2026: o --text-3 dá 2,66:1 sobre o
     --bg, abaixo dos 4,5:1. O token fica, porque é do protótipo da home, e as
     telas do aluno usam o --text-2 nos textos pequenos, com 4,89:1. */
  --text-4:      #12262B59;
  --chip:        #12262B0F;
  --cinza:       #B9BCB8;
  --placeholder-fundo: #DCD8D0;
  --placeholder-texto: #7C8A8E;
  --brand:       #0E4A57;
  --brand-2:     #16606F;
  --brand-ink:   #FFFFFF;
  --brand-soft:  #0E4A5717;
  --brand-soft2: #0E4A5726;
  --brand-tint:  #0E4A570F;
  --brand-borda: #0E4A5733;
  --brand-fundo: #0E4A57;
  --brand-fundo-2: #0A343D;
  --sobre-brand:   #FFFFFF;
  --sobre-brand-2: #BBD8DE;
  --sobre-brand-3: #8FC3CD;
  --sobre-brand-4: #8FA9AE;
  --sobre-brand-5: #5F8B93;
  --acento:      #C25A1E;
  --acento-2:    #A94C16;
  --acento-ink:  #FFFFFF;
  --acento-soft: #C25A1E29;
  --acento-borda: #C25A1E4D;
  --acento-sombra:    0 2px 6px #C25A1E52;
  --acento-sombra-lg: 0 3px 8px #C25A1E52;
  --acento-sombra-sm: 0 2px 5px #C25A1E47;
  --ok:          #2F7D53;
  --ok-soft:     #2F7D5314;
  --warn:        #B3402F;
  --warn-soft:   #B3402F12;
  --amber:       #B0870A;
  --amber-2:     #C89A12;
  --amber-soft:  #C89A1214;
  --shadow:      0 3px 14px #12262B14;
  --shadow-md:   0 4px 16px #0000002E;
  --shadow-lg:   0 8px 28px #00000038;
  --sombra-botao: 0 1px 2px #12262B33;

  --sans:  'Libre Franklin', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: 'STIX Two Text', 'STIX Two', Charter, Georgia, 'Times New Roman', serif;
  --mono:  'Go Mono', 'DejaVu Sans Mono', 'Liberation Mono', ui-monospace, monospace;
  --r: 10px;

  /* O alvo de toque mínimo do item E.10, declarado aqui para que nenhum
   * componente tenha de repetir o número. */
  --toque: 44px;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg:          #0C1618;
  --surface:     #132124;
  --surface-2:   #192A2E;
  --line:        #FFFFFF1F;
  --line-2:      #FFFFFF33;
  --line-08:     #FFFFFF14;
  --line-10:     #FFFFFF1A;
  --line-14:     #FFFFFF24;
  --line-16:     #FFFFFF29;
  --line-25:     #FFFFFF40;
  --linha-clara: #FFFFFF26;
  --text:        #E9EFF0;
  --text-2:      #A9BDC1;
  --text-3:      #7E9397;
  --text-4:      #E9EFF059;
  --chip:        #FFFFFF14;
  --cinza:       #4A5457;
  --placeholder-fundo: #23343A;
  --placeholder-texto: #7E9397;
  --brand:       #7FC4CF;
  --brand-2:     #9AD4DD;
  --brand-ink:   #0A343D;
  --brand-soft:  #7FC4CF1A;
  --brand-soft2: #7FC4CF2E;
  --brand-tint:  #7FC4CF14;
  --brand-borda: #7FC4CF4D;
  --brand-fundo: #0C3B46;
  --brand-fundo-2: #082A32;
  --sobre-brand:   #F2F7F8;
  --sobre-brand-2: #BBD8DE;
  --sobre-brand-3: #8FC3CD;
  --sobre-brand-4: #8FA9AE;
  --sobre-brand-5: #5F8B93;
  --acento:      #D9692A;
  --acento-2:    #E67A3C;
  --acento-ink:  #FFFFFF;
  --acento-soft: #D9692A33;
  --acento-borda: #D9692A66;
  --acento-sombra:    0 2px 6px #00000060;
  --acento-sombra-lg: 0 3px 8px #00000060;
  --acento-sombra-sm: 0 2px 5px #00000050;
  --ok:          #6FBF8C;
  --ok-soft:     #6FBF8C1F;
  --warn:        #E38A7A;
  --warn-soft:   #E38A7A1F;
  --amber:       #D9B24A;
  --amber-2:     #D9B24A;
  --amber-soft:  #D9B24A1F;
  --shadow:      0 3px 14px #00000050;
  --shadow-md:   0 4px 16px #00000060;
  --shadow-lg:   0 8px 28px #00000070;
  --sombra-botao: 0 1px 2px #00000060;
  color-scheme: dark;
}

/* ── a base, e nada além dela ────────────────────────────────────────────── */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--brand); }
a:hover { color: var(--acento); }

:focus-visible {
  outline: 2px solid var(--brand-2);
  outline-offset: 2px;
  border-radius: 4px;
}

/* A escala do protótipo: título pesado com espaçamento negativo, e o
 * tamanho de celular primeiro. A página inicial cresce a sua no desktop. */
h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
  text-wrap: pretty;
}
h1 { font-size: 1.6875rem; }
h2 { font-size: 1.3125rem; }
h3 { font-size: 1.0625rem; }

img { max-width: 100%; height: auto; }

.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: .9em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}