/* Os quatro temas da Agenda: Kromon - Cynosure e Kromon - Kiroshi, cada um claro e escuro (Rodrigo, 12/11; cores aprovadas em 03/11, futuro/fonte-1.0.15/TEMAS.md:3, 11 e 16).
   html[data-familia] escolhe a família e html[data-theme="light"|"dark"] (o seletor do kit) escolhe o lado.
   - KIROSHI = os tokens do kit sem mudança (tokens-kromon.css): claro é o branco tradicional e escuro o preto tradicional ("referência do CSS atual").
   - CYNOSURE = a paleta da tela de entrada do Fonte que o Rodrigo mostrou em 12/11 ("assim olha"), a do estudo de entrada de 11/11 (docs/design/fonte-1.0.15/entrada-referencias-2026-11-11/
     estilo.css:2, o claro, e a regra body[data-theme$="dark"], o escuro), COPIADA SEM MUDAR. Conferida com conta-gotas na imagem do Rodrigo (página #f2e8df, papel #fbf5ed, "Fonte" #e00022
     batem). Não existe tabela final de tokens (TEMAS.md:5 chama os hex de "amostras provisórias"): LEIA-ME, V14. O que o estudo NÃO traz está marcado DERIVADO: é cálculo (color-mix) a partir
     dos valores do estudo, não cor nova.
   A textura vermelha da arte aprovada (imagem 59 e entrada do Fonte) não está no repositório: no lugar dela entra um degradê vermelho no canto inferior esquerdo, só no Cynosure. */

html[data-familia="cynosure"][data-theme="light"] {
  --fundo: #f2e8df;          /* estudo: --page (conferido na imagem) */
  --painel: #fbf5ed;         /* estudo: --paper (conferido na imagem) */
  --campo: #fbf5ed;          /* estudo: --form */
  --painel-2: #fffaf4;       /* estudo: --tile */
  --texto: #171515;          /* estudo: --ink */
  --texto-2: #39312e;        /* medido no subtítulo da imagem; é o texto de apoio do mesmo estudo (vermelho.css:25) */
  --cinza: #746a65;          /* estudo: --muted */
  --borda: #dfd0c5;          /* estudo: --line */
  --vermelho: #e00022;       /* estudo: --accent (conferido: "Fonte" na imagem) */
  --vermelho-acao: #cc001a;  /* estudo: --button */
  --trilha: var(--borda);                                                         /* DERIVADO */
  --borda-forte: color-mix(in srgb, var(--texto) 55%, var(--painel));             /* DERIVADO: contorno de controle (3:1) */
  --apagado: color-mix(in srgb, var(--texto) 40%, var(--painel));                 /* DERIVADO */
  --vermelho-fundo: color-mix(in srgb, var(--vermelho) 8%, var(--painel));        /* DERIVADO */
  --vermelho-linha: color-mix(in srgb, var(--vermelho) 28%, var(--painel));       /* DERIVADO */
  --sombra: rgba(60, 40, 20, 0.14);
  --mancha: #c8282b;
}
html[data-familia="cynosure"][data-theme="dark"] {
  --fundo: #141313;          /* estudo: --page */
  --painel: #1c1b1a;         /* estudo: --paper */
  --campo: #211f1e;          /* estudo: --form */
  --painel-2: #292523;       /* estudo: --tile */
  --texto: #f7eee9;          /* estudo: --ink */
  --cinza: #b3a8a1;          /* estudo: --muted */
  --borda: #49413d;          /* estudo: --line */
  --vermelho: #f21732;       /* estudo: --button (o claro e o escuro dão o mesmo vermelho de acento só no claro; no escuro o estudo só traz o do botão) */
  --vermelho-acao: #f21732;
  --texto-2: color-mix(in srgb, var(--texto) 86%, var(--painel));                 /* DERIVADO */
  --trilha: var(--borda);                                                         /* DERIVADO */
  --borda-forte: color-mix(in srgb, var(--texto) 42%, var(--painel));             /* DERIVADO */
  --apagado: color-mix(in srgb, var(--texto) 40%, var(--painel));                 /* DERIVADO */
  --vermelho-fundo: color-mix(in srgb, var(--vermelho) 10%, var(--painel));       /* DERIVADO */
  --vermelho-linha: color-mix(in srgb, var(--vermelho) 32%, var(--painel));       /* DERIVADO */
  --mancha: #940019;         /* estudo: --hero */
}
/* O degradê no lugar da textura vermelha (canto inferior esquerdo): só no Cynosure; o Kiroshi é liso. */
html[data-familia="cynosure"] body {
  background: radial-gradient(ellipse 36vmax 44vmax at -4% 104%, var(--mancha) 0%, color-mix(in srgb, var(--mancha) 72%, transparent) 30%, color-mix(in srgb, var(--mancha) 28%, transparent) 55%, transparent 74%) var(--fundo);
  background-attachment: fixed;
}
html[data-familia="kiroshi"] body { background: var(--fundo); }