/* Paideia — design tokens.
   Camada 1 (paleta) é trocável: cada bloco [data-palette] redefine os mesmos
   slots. Camada 2 (semântica) mapeia papéis, não cores. Componentes consomem
   apenas os tokens semânticos; nenhum hex deve viver fora deste arquivo.

   Paleta padrão "oche": primária amostrada das ilustrações do artigo
   "Paideia, a educação na Grécia antiga" (National Geographic Portugal,
   .../VidaQuotidiana/Paideia/p6|p9|p14|p16|p17|p18.jpg): média ponderada dos
   pixels quentes (matiz 22°–52°, sat≥.5, val≥.6) = #E29839 em 24% da amostra.
   A escala 50–900 é derivada desse valor por passo fixo de luminosidade HSL,
   mantendo matiz e saturação; os contrastes citados abaixo são medidos. */

/* ---------- camada 1: paleta (trocável) ---------- */
:root,
[data-palette="oche"] {
  --palette-brand-50:#FDF8F2;
  --palette-brand-100:#F9EBD9;
  --palette-brand-200:#F3D4AD;
  --palette-brand-300:#ECBB7C;
  --palette-brand-400:#E7A858;
  --palette-brand-500:#E29839; /* amostrado: 7,9:1 com --palette-neutral-900 */
  /* Texto sobre a primária é decisão da paleta, não do componente. */
  --palette-on-brand:var(--palette-neutral-900);
  --palette-brand-600:#D3841F;
  --palette-brand-700:#B06E1A; /* 4,1:1 com branco (bordas de seleção) */
  --palette-brand-800:#8C5815; /* 6,0:1 com branco (texto/links) */
  --palette-brand-900:#68410F;
  --palette-neutral-0:#FFFFFF;
  --palette-neutral-50:#FBF9F5;
  --palette-neutral-100:#F2F0EC;
  --palette-neutral-200:#E1DED7;
  --palette-neutral-400:#8A857C;
  --palette-neutral-600:#595959;
  --palette-neutral-900:#111111;
  --palette-mark:#12467A;
}

/* Paleta alternativa de demonstração: prova que trocar a paleta não exige
   tocar em componente algum. */
[data-palette="mono"] {
  /* Escala de cinza. O degrau de seleção (500) é cinza médio, e não quase-preto:
     uma primária escura se confunde com a tinta do texto e, no piano, com as
     teclas pretas (#111111) — medido em 1,39:1. Cinza médio dá 5,6:1 contra a
     tecla branca E contra a tecla preta. */
  --palette-brand-50:#F7F7F7;
  --palette-brand-100:#EFEFEF;
  --palette-brand-200:#DEDEDE;
  --palette-brand-300:#C4C4C4;
  --palette-brand-400:#A8A8A8;
  --palette-brand-500:#8C8C8C;
  --palette-brand-600:#707070;
  --palette-brand-700:#545454;
  --palette-brand-800:#3A3A3A;
  --palette-brand-900:#1F1F1F;
  --palette-on-brand:var(--palette-neutral-900); /* tinta sobre cinza médio: 5,6:1 */
}

[data-palette="azul"] {
  --palette-brand-50:#F2F6FC;
  --palette-brand-100:#DCE8F8;
  --palette-brand-200:#B7CFF0;
  --palette-brand-300:#8FB2E5;
  --palette-brand-400:#5F8FD6;
  --palette-brand-500:#2F6FC4;
  --palette-brand-600:#245CA6;
  --palette-brand-700:#1C4A88;
  --palette-brand-800:#14396A;
  --palette-brand-900:#0E2A50;
  /* Azul médio não aceita tinta escura (3,8:1): aqui a marca leva papel. */
  --palette-on-brand:var(--palette-neutral-0);
}

/* ---------- camada 2: papéis semânticos ---------- */
:root {
  --color-bg:var(--palette-neutral-50);
  --color-surface:var(--palette-neutral-0);
  --color-sunken:var(--palette-neutral-100);
  --color-ink:var(--palette-neutral-900);
  --color-muted:var(--palette-neutral-600);
  --color-line:var(--palette-neutral-200);
  --color-wash:var(--palette-neutral-100);
  --color-mark:var(--palette-mark);

  --color-primary:var(--palette-brand-500);
  --color-primary-hover:var(--palette-brand-600);
  --color-primary-line:var(--palette-brand-700);
  --color-primary-text:var(--palette-brand-800);
  --color-primary-soft:var(--palette-brand-100);
  --color-primary-wash:var(--palette-brand-50);
  --color-on-primary:var(--palette-on-brand);

  --color-focus:var(--palette-brand-800);

  /* Estados e desenho técnico (mesmos papéis em todos os temas). */
  --color-ok:#1A7D46;
  --color-danger:#B4453B;
  --color-on-strong:var(--palette-neutral-0);
  --color-shadow:rgb(0 0 0 / 20%);
  --color-diagram-line:var(--palette-neutral-400);
  --color-diagram-key:var(--palette-neutral-0);
  --color-diagram-key-black:var(--palette-neutral-900);
  --color-diagram-active:var(--color-primary);
  --color-diagram-active-ink:var(--color-on-primary);
  /* Tecla preta marcada: por padrão a mesma primária; o contorno fica disponível
     para paletas cuja primária não se afasta o suficiente da tinta. */
  --color-diagram-active-black:var(--color-primary);
  --color-diagram-active-black-ink:var(--color-on-primary);
  /* Contorno da marca. A primária clara fica a 2,39:1 do branco e a primária da
     paleta mono a 3,36:1 da tecla preta: o contorno de tinta (18,9:1) resolve os
     dois casos sem depender do matiz. */
  --color-diagram-active-ring:var(--palette-neutral-900);

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --radius-sm:4px; --radius-md:7px; --radius-lg:12px; --radius-pill:999px;
  --target:44px;

  --font-sans:"Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;
  --font-serif:Georgia,"Times New Roman",serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --text-xs:11px; --text-sm:12px; --text-md:14px; --text-lg:16px; --text-xl:24px; --text-display:32px;
  --leading-tight:1.2; --leading-body:1.5;
}

/* Tema escuro: mesmos papéis, outra superfície e primária mais clara. */
[data-theme="escuro"] {
  --color-bg:#16151A; --color-surface:#1E1D23; --color-sunken:#26252C;
  --color-ink:#ECE9E3; --color-muted:#A79F94; --color-line:#34323A; --color-wash:#26252C;
  --color-mark:#7FB2E8;
  --color-primary:var(--palette-brand-400);
  --color-primary-hover:var(--palette-brand-300);
  --color-primary-line:var(--palette-brand-500);
  --color-primary-text:var(--palette-brand-300);
  --color-primary-soft:var(--palette-brand-900);
  --color-primary-wash:#241C10;
  --color-on-primary:var(--palette-neutral-900);
  --color-focus:var(--palette-brand-300);
  --color-ok:#6FD39A; --color-danger:#E8A19A; --color-shadow:rgb(0 0 0 / 45%);
  --color-diagram-line:var(--palette-neutral-400); --color-diagram-key:var(--palette-neutral-0);
  --color-diagram-key-black:var(--palette-neutral-900);
}

/* Tema sepia: papel envelhecido. */
[data-theme="sepia"] {
  --color-bg:#F4ECD9; --color-surface:#FDF8EC; --color-sunken:#E8D9BB;
  --color-ink:#2A2419; --color-muted:#6F6552; --color-line:#DED2B8; --color-wash:#EDE1C8;
  --color-mark:#0F456F;
  --color-primary:var(--palette-brand-600);
  --color-primary-text:var(--palette-brand-900);
  --color-primary-soft:#EFDFC4; --color-primary-wash:#F7F0E0;
  --color-on-primary:var(--palette-on-brand);
  --color-focus:var(--palette-brand-900);
}

/* Paleta em escala de cinza: dois reforços que só existem aqui porque a primária
   não carrega matiz. Sem eles a marca de seleção encosta na tinta e na tecla preta.
   Vem depois dos temas para valer em claro, escuro e sepia. */
[data-palette="mono"] {
  /* Em cinza a marca de seleção é sempre o cinza médio, em qualquer tema: os
     degraus 600/700 que os temas usam dariam 3,8:1 com a tinta. */
  --color-primary:var(--palette-brand-500);
  --color-primary-hover:var(--palette-brand-400);
  --color-primary-line:var(--palette-brand-700);
  --color-primary-text:var(--palette-brand-800);
  --color-on-primary:var(--palette-neutral-900);
  --color-diagram-active:var(--palette-brand-500);
  --color-diagram-active-ink:var(--palette-neutral-900);
  --color-diagram-active-black:var(--palette-brand-500);
  --color-diagram-active-black-ink:var(--palette-neutral-900);
}

/* Nomes legados do app (--bg, --accent, ...) são mapeados em src/styles.css,
   não aqui: tokens.css expõe só papéis semânticos de cor. */