/* ============================================================
   CISV Brasil — tokens de design
   Paleta e tipografia do manual oficial "Looking Good — CISV's
   Brand Guidelines". Nenhuma cor aqui e invencao: todas foram
   conferidas contra o CSS de producao do cisv.org.
   ============================================================ */

:root {
  /* --- Azul: ~90% da presenca cromatica do site --- */
  --blue-700: #003DA6;  /* Pantone 293 C — rodape, overlays */
  --blue-600: #00518F;  /* Pantone 301 C — hover de link */
  --blue-500: #0072CE;  /* Pantone 285 C — PRIMARIA */
  --blue-300: #B9D9EB;  /* Pantone 290 C — badges, filetes */
  --blue-100: #E3EFF8;
  --blue-050: #F1F7FB;

  /* --- Laranja: acento de acao, nunca area grande --- */
  --orange-500: #FF671F; /* Pantone 165 C */
  --orange-700: #C74E12; /* unica variante valida com texto branco */
  --orange-050: #FFF2EC;

  /* --- Areas educacionais: so em badge e icone, nunca em UI --- */
  --edu-diversidade:     #FFC72C; /* Pantone 123 C */
  --edu-direitos:        #AA0061; /* Pantone 227 C */
  --edu-conflito:        #F9423A; /* Warm Red C */
  --edu-sustentabilidade:#509E2F; /* Pantone 362 C */

  /* --- Neutros com viés azul: cinza puro parece descuido --- */
  --ink-900: #101720;
  --ink-700: #26313D;
  --ink-600: #46545F;
  --ink-400: #6E7E8D;
  --ink-300: #93A2B0;

  --surface:      #FFFFFF;
  --surface-2:    #F6FAFD;
  --surface-sunk: #E9F1F8;
  --bg:           #FFFFFF;

  --line:   #D9E4EE;
  --line-2: #BCCDDC;

  /* --- Tipografia (as tres fontes do manual) --- */
  --font-display: 'Overpass', 'Source Sans 3', system-ui, sans-serif;
  --font-body: 'Source Sans 3', 'Source Sans Pro', system-ui, 'Segoe UI', Arial, sans-serif;
  --font-quote: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  /* Escala modular 1.250 sobre base de 17px */
  --fs-display: clamp(2.25rem, 1.55rem + 2.9vw, 3.5rem);
  --fs-h1:      clamp(1.95rem, 1.5rem + 1.9vw, 2.6rem);
  --fs-h2:      clamp(1.55rem, 1.3rem + 1.05vw, 1.95rem);
  --fs-h3:      1.3rem;
  --fs-h4:      1.09rem;
  --fs-lead:    clamp(1.09rem, 1.03rem + .28vw, 1.22rem);
  --fs-body:    1.0625rem;
  --fs-small:   .9375rem;
  --fs-tiny:    .8125rem;

  /* --- Espacamento --- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;

  --radius:    10px;
  --radius-sm: 6px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(16, 23, 32, .05);
  --shadow:    0 1px 2px rgba(16, 23, 32, .05), 0 8px 24px -14px rgba(16, 23, 32, .18);
  --shadow-lg: 0 2px 6px rgba(16, 23, 32, .07), 0 26px 50px -24px rgba(16, 23, 32, .26);

  --container: 1200px;
  --measure: 68ch;

  --header-h: 74px;

  /* --- Superficies azuis institucionais: NAO invertem com o tema ---
     Rodape, hero, faixa superior e o bloco de protecao a crianca sao areas em que o azul
     do CISV e o fundo e o texto e branco. Esses quatro casos NAO podem usar --blue-700,
     porque aquele token inverte no tema escuro (#003DA6 vira #9CC8F2) enquanto o texto
     segue branco — o resultado e branco sobre azul claro, ilegivel.

     O erro nao era so de contraste: #9CC8F2 nao existe na identidade do CISV. O manual
     "Looking Good" define #003DA6 (Pantone 293 C) para rodape e overlays, e essa cor vale
     nos dois temas. Fixar aqui conserta a legibilidade E fica mais fiel a marca.

     Contraste conferido: #FFFFFF sobre #003DA6 = 9,4:1 (AAA).
                          #D6E6F5 sobre #003DA6 = 6,7:1 (AA para qualquer tamanho).
                          #FFFFFF sobre #0072CE = 4,9:1 (AA para texto normal). */
  --azul-solido:      #003DA6;
  --azul-solido-2:    #0072CE;
  --sobre-azul:       #FFFFFF;
  --sobre-azul-suave: #D6E6F5;
  --sobre-azul-linha: rgba(255, 255, 255, .16);
  --sobre-azul-fraco: rgba(255, 255, 255, .78);
}

/* ------------------------------------------------------------
   Tema escuro — DISPONIVEL, MAS NAO AUTOMATICO.

   A regra @media (prefers-color-scheme: dark) foi REMOVIDA de proposito. Nao e descuido
   nem falta de suporte: e decisao de produto, e vale a pena estar escrita.

   O CISV e azul e branco. E isso que uma diretoria de voluntarios reconhece como "o nosso
   site". Se o tema seguisse o sistema operacional, quem abrisse o link num celular em modo
   escuro veria uma versao da marca que nunca viu, sem ter escolhido nada — e numa reuniao
   de apresentacao isso vira uma pergunta sobre a cor, roubando o tempo do que a proposta
   realmente trata.

   Entao o site nasce CLARO para todo mundo. O tema escuro continua inteiro e funcional,
   mas so entra quando alguem carimba data-theme="dark" no <html> — escolha explicita da
   pessoa, nunca do sistema.

   PARA REATIVAR o comportamento automatico, basta reenvolver o bloco abaixo em
   @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { ... } }.
   Nenhum outro arquivo precisa mudar.

   O custo desta escolha, dito com todas as letras: quem prefere tema escuro por conforto
   visual deixa de ser atendido automaticamente. E uma perda real de acessibilidade, aceita
   aqui em troca de previsibilidade na apresentacao — e reversivel no dia em que a diretoria
   quiser.
   ------------------------------------------------------------ */

:root[data-theme="dark"] {
  --blue-700: #9CC8F2;
  --blue-600: #7FB6EA;
  --blue-500: #4EA6F0;
  --blue-300: #1E4E78;
  --blue-100: #16283A;
  --blue-050: #121D28;

  --orange-500: #FF8A4C;
  --orange-700: #FFA877;
  --orange-050: #2A1810;

  --edu-diversidade: #FFD75E;
  --edu-direitos: #E86BA8;
  --edu-conflito: #FF7A72;
  --edu-sustentabilidade: #7FC95E;

  --ink-900: #EDF3F9;
  --ink-700: #D2DDE7;
  --ink-600: #AFBECC;
  --ink-400: #8496A6;
  --ink-300: #6B7C8C;

  --surface:      #141D28;
  --surface-2:    #18232F;
  --surface-sunk: #0E1721;
  --bg:           #0B121B;

  --line:   #26333F;
  --line-2: #35444F;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow:    0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -14px rgba(0, 0, 0, .7);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, .5), 0 26px 50px -24px rgba(0, 0, 0, .8);
}