/* Capi — tokens do design system. Contrato: marca/kit/BRAND.md
   Uso: <html data-area="math|home|pt|sci|hist|geo|en|art" data-volume="brincadeira|calmo">
   Componentes usam só var(--area*), nunca o hex de uma área. */


:root {
  /* núcleo */
  --papel: #FFF7EC;
  --papel-2: #FFEBD2;
  --card: #FFFFFF;
  --tinta: #2B1B12;
  --tinta-suave: #6B5A4E;
  --grade: rgba(43, 27, 18, .07);
  --tinta-fixa: #2B1B12;      /* texto sobre cor clara (pitaya, sol, estados): não troca no escuro */
  --linha: var(--tinta);      /* contornos */
  --sombra-cor: var(--tinta); /* sombra dura */

  --pitaya: #FF3E8A;          /* CTA, sempre. Texto tinta. */
  --pitaya-escuro: #D81B66;
  --sol: #FFC93C;
  --ceu: #7CC7FF;
  --lilas: #B9A6FF;
  --menta: #7EE2B8;

  /* estados (ícone + texto sempre) */
  --certo: #22C58B;
  --quase: #FF8A65;
  --aviso: #FFC93C;
  --info: #7CC7FF;

  /* área padrão (sem módulo) */
  --area: var(--tinta);
  --area-texto: var(--papel);
  --area-tinta: var(--papel-2);
  --area-funda: var(--tinta);

  /* tipografia */
  --f-display: 'Fredoka', 'Baloo 2', system-ui, sans-serif;
  --f-texto: 'Lexend', system-ui, sans-serif;
  --f-mao: 'Caveat', cursive;
  --t-12: 12px; --t-14: 14px; --t-16: 16px; --t-18: 18px; --t-22: 22px;
  --t-28: 28px; --t-36: 36px; --t-48: 48px; --t-64: 64px; --t-88: 88px;

  /* forma */
  --r-sm: 12px; --r-md: 20px; --r-lg: 28px; --r-pill: 999px;
  --borda-w: 3px;
  --borda: var(--borda-w) solid var(--linha);
  --sombra-d: 5px;
  --sombra: var(--sombra-d) var(--sombra-d) 0 var(--sombra-cor);
  --sombra-sm: 3px 3px 0 var(--sombra-cor);

  /* espaço */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --toque: 48px;

  /* movimento */
  --mola: cubic-bezier(.34, 1.56, .64, 1);
  --rapido: 120ms;
  --medio: 240ms;
}

/* módulos */
[data-area="math"] { --area: #1F4FD8; --area-texto: #FFFFFF; --area-tinta: #E3EAFF; --area-funda: #173BA6; }
[data-area="home"] { --area: #E8890C; --area-texto: #2B1B12; --area-tinta: #FFEFD6; --area-funda: #8F4A00; }
[data-area="pt"]   { --area: #A61E4D; --area-texto: #FFFFFF; --area-tinta: #FBE3EC; --area-funda: #A61E4D; }
[data-area="sci"]  { --area: #0B7A5E; --area-texto: #FFFFFF; --area-tinta: #DDF3EC; --area-funda: #0B7A5E; }
[data-area="hist"] { --area: #7A4B1E; --area-texto: #FFFFFF; --area-tinta: #F3E6D8; --area-funda: #7A4B1E; }
[data-area="geo"]  { --area: #0B7285; --area-texto: #FFFFFF; --area-tinta: #DDF1F4; --area-funda: #0B7285; }
[data-area="en"]   { --area: #7C3AED; --area-texto: #FFFFFF; --area-tinta: #EEE5FF; --area-funda: #6A2BD9; }
[data-area="art"]  { --area: #4D7C0F; --area-texto: #FFFFFF; --area-tinta: #E9F3D9; --area-funda: #4D7C0F; }


/* modo escuro: "caderno à noite". Contorno de giz claro, sombra dura preta, cores claras mantêm texto tinta-fixa.
   Uso: <html data-tema="escuro">. Contraste conferido em a11y/RELATORIO.md (gerado por a11y/checar_cores.py). */
[data-tema="escuro"] {
  color-scheme: dark;
  --papel: #1A1410;
  --papel-2: #261D17;
  --card: #2E241D;
  --tinta: #FFF7EC;
  --tinta-suave: #CDBBAC;
  --grade: rgba(255, 247, 236, .06);
  --linha: #EBDCCB;
  --sombra-cor: #000000;
  --area: var(--tinta); --area-texto: var(--papel); --area-tinta: var(--papel-2); --area-funda: var(--tinta);
}
/* gerado por a11y/checar_cores.py */
[data-tema="escuro"] [data-area="math"], [data-tema="escuro"][data-area="math"] { --area: #3E67DB; --area-texto: #FFFFFF; --area-tinta: #2A3051; --area-funda: #6D8ADF; }
[data-tema="escuro"] [data-area="home"], [data-tema="escuro"][data-area="home"] { --area: #E8890C; --area-texto: #2B1B12; --area-tinta: #624018; --area-funda: #E8890C; }
[data-tema="escuro"] [data-area="pt"], [data-tema="escuro"][data-area="pt"] { --area: #B8496D; --area-texto: #FFFFFF; --area-tinta: #50222A; --area-funda: #C9738B; }
[data-tema="escuro"] [data-area="sci"], [data-tema="escuro"][data-area="sci"] { --area: #127E62; --area-texto: #FFFFFF; --area-tinta: #243C2F; --area-funda: #4A9B83; }
[data-tema="escuro"] [data-area="hist"], [data-tema="escuro"][data-area="hist"] { --area: #8F673F; --area-texto: #FFFFFF; --area-tinta: #432F1D; --area-funda: #A98766; }
[data-tema="escuro"] [data-area="geo"], [data-tema="escuro"][data-area="geo"] { --area: #1A7A8B; --area-texto: #FFFFFF; --area-tinta: #243A3A; --area-funda: #4F97A2; }
[data-tema="escuro"] [data-area="en"], [data-tema="escuro"][data-area="en"] { --area: #8649ED; --area-texto: #FFFFFF; --area-tinta: #442A57; --area-funda: #A575ED; }
[data-tema="escuro"] [data-area="art"], [data-tema="escuro"][data-area="art"] { --area: #4D7C0F; --area-texto: #FFFFFF; --area-tinta: #373D19; --area-funda: #749740; }

/* volume calmo (pais e escola) */
[data-volume="calmo"] {
  --borda-w: 2px;
  --sombra-d: 3px;
  --sombra-sm: 2px 2px 0 var(--sombra-cor);
}

/* troca de fonte display (teste no design system) */
[data-display="baloo"]  { --f-display: 'Baloo 2', 'Fredoka', system-ui, sans-serif; }
[data-display="lilita"] { --f-display: 'Lilita One', 'Fredoka', system-ui, sans-serif; }

/* fundo de caderno quadriculado */
.cp-caderno {
  background-color: var(--papel);
  background-image:
    linear-gradient(var(--grade) 1px, transparent 1px),
    linear-gradient(90deg, var(--grade) 1px, transparent 1px);
  background-size: 24px 24px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --mola: ease; --rapido: 0ms; --medio: 0ms; }
}