/* Marca TSA: tokens da identidade (UNA Branding, setembro de 2026; identidade.pdf).
   Fonte única de cor e de tipo do painel instalartsa e da aba do Cadu. A aba leva uma cópia byte a byte
   (o teste confere). Nenhuma cor fora deste arquivo.
   Os tokens abaixo (paleta, três vozes, espaço, raio, forma e tema escuro) são os mesmos do Design System
   TSA v2 (/ds/v2/tokens.css), com os mesmos nomes e valores. Ficam aqui, e não num link para o DS, porque a aba
   mora em outra origem e a CSP só aceita arquivo da própria origem. Daqui ficam de fora o tema claro, as frentes
   por data-frente e as peças .tsa-*, que o painel não usa: o desenho das páginas está em estilo.css.
   Fontes servidas da própria origem, todas SIL Open Font License 1.1:
   Funnel Display e Funnel Sans (The Funnel Project Authors), Geist Mono (The Geist Project Authors). */

@font-face { font-family: "Funnel Display"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("fontes/funnel-display.woff2") format("woff2"); }
@font-face { font-family: "Funnel Sans"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("fontes/funnel-sans.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fontes/geist-mono.woff2") format("woff2"); }

/* ---------- 1. Paleta: valor cru, igual ao manual ---------- */
:root {
  /* Bário: a assinatura. Só no detalhe que importa. */
  --tsa-bario-500: #DBF576;
  --tsa-bario-400: #E3F895;
  --tsa-bario-300: #EBFAB4;
  --tsa-bario-100: #F9FDE6;
  /* Carbono: fundo escuro. */
  --tsa-carbono-900: #0E1112;
  --tsa-carbono-700: #191E20;
  --tsa-carbono-500: #232B2E;
  --tsa-carbono-400: #545A5D;
  /* Aço: o neutro frio que sustenta todas as frentes. */
  --tsa-aco-500: #6A868F;
  --tsa-aco-400: #8CA1A8;
  --tsa-aco-300: #ADBCC1;
  --tsa-aco-200: #C8D2D6;
  /* Magnésio: claro. */
  --tsa-magnesio-50: #EDEEEE;
  --tsa-magnesio-100: #D7D9D9;
  --tsa-magnesio-200: #AEB2B2;
  --tsa-magnesio-300: #868A8C;
  /* Frentes (página 47). */
  --tsa-calcio-500: #FF934D;   /* Business */
  --tsa-calcio-400: #FFAC75;
  --tsa-calcio-300: #FFC49D;
  --tsa-calcio-200: #FFD8BE;
  --tsa-cobre-500: #A4E3F0;    /* Marketing */
  --tsa-cobre-600: #8CC1CC;
  --tsa-cobre-300: #CDF0F7;
  --tsa-cobre-200: #DEF5FA;
  --tsa-potassio-500: #B8ADFF; /* Education */
  --tsa-potassio-600: #9C93D9;
  --tsa-potassio-300: #D8D2FF;
  --tsa-potassio-200: #E5E1FF;
  --tsa-sodio-500: #E0D194;    /* Club */
  --tsa-sodio-600: #BEB27E;
  --tsa-sodio-300: #EEE6C4;
  --tsa-sodio-200: #F4EED8;
  /* Fora da paleta do manual: branco dos cartões do tema claro (páginas 64 e 66). */
  --tsa-branco: #FFFFFF;

  /* Três vozes (páginas 49, 51 e 53). */
  --tsa-fonte-titulo: "Funnel Display", "Funnel Sans", system-ui, sans-serif;
  --tsa-fonte-texto: "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tsa-fonte-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Espaço (escala 4/8), raio e movimento. */
  --tsa-e1: 4px; --tsa-e2: 8px; --tsa-e3: 12px; --tsa-e4: 16px; --tsa-e5: 24px;
  --tsa-e6: 32px; --tsa-e7: 48px; --tsa-e8: 64px; --tsa-e9: 96px;
  --tsa-raio-1: 4px; --tsa-raio-2: 8px; --tsa-raio-3: 12px; --tsa-raio-4: 16px; --tsa-raio-pilula: 999px;
  --tsa-curva: cubic-bezier(.2, .7, .2, 1);
  --tsa-t1: 150ms; --tsa-t2: 200ms; --tsa-t3: 250ms;
  --tsa-largura: 1160px;

  /* Frente ativa. Sem data-frente, vale o Aço. Texto sobre cor de frente é sempre Carbono. */
  --tsa-frente: var(--tsa-aco-500);
  --tsa-sobre-frente: var(--tsa-carbono-900);

  /* Forma: o Pixel é um quadrado com um canto cortado a 45° (páginas 29 e 42). */
  --tsa-pixel: polygon(0 0, 100% 0, 100% 100%, 46% 100%, 0 54%);
  --tsa-corte: polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

/* ---------- 2. Tema escuro (padrão): painel e produto, como a página 65 ---------- */
:root, [data-tema="escuro"] {
  color-scheme: dark;
  --tsa-fundo: var(--tsa-carbono-900);
  --tsa-painel: var(--tsa-carbono-700);
  --tsa-superficie: var(--tsa-carbono-500);
  --tsa-superficie-2: color-mix(in srgb, var(--tsa-carbono-500) 78%, var(--tsa-carbono-400));
  --tsa-linha: color-mix(in srgb, var(--tsa-carbono-500) 45%, var(--tsa-carbono-400));
  --tsa-linha-suave: var(--tsa-carbono-500);
  --tsa-linha-forte: var(--tsa-aco-500);       /* borda de campo: 3:1 ou mais nos três fundos */
  --tsa-texto: var(--tsa-magnesio-50);
  --tsa-texto-2: var(--tsa-aco-300);
  --tsa-texto-3: var(--tsa-aco-400);
  --tsa-assinatura: var(--tsa-bario-500);
  --tsa-assinatura-forte: var(--tsa-bario-400);
  --tsa-sobre-assinatura: var(--tsa-carbono-900);
  /* Ação principal: pílula invertida, como nas páginas 65 e 70. */
  --tsa-acao: var(--tsa-magnesio-50);
  --tsa-acao-forte: var(--tsa-branco);
  --tsa-sobre-acao: var(--tsa-carbono-900);
  --tsa-foco: var(--tsa-bario-500);
  /* Estados. O manual não define verde, amarelo e vermelho de sistema: o estado usa a própria paleta. */
  --tsa-estado-ok: var(--tsa-bario-500);
  --tsa-estado-alerta: var(--tsa-sodio-500);
  --tsa-estado-erro: var(--tsa-calcio-500);
  --tsa-estado-info: var(--tsa-cobre-500);
  --tsa-estado-ok-fundo: color-mix(in srgb, var(--tsa-bario-500) 12%, transparent);
  --tsa-estado-alerta-fundo: color-mix(in srgb, var(--tsa-sodio-500) 12%, transparent);
  --tsa-estado-erro-fundo: color-mix(in srgb, var(--tsa-calcio-500) 12%, transparent);
  --tsa-estado-info-fundo: color-mix(in srgb, var(--tsa-cobre-500) 12%, transparent);
  --tsa-estado-ok-texto: var(--tsa-bario-500);
  --tsa-estado-alerta-texto: var(--tsa-sodio-500);
  --tsa-estado-erro-texto: var(--tsa-calcio-500);
  --tsa-estado-info-texto: var(--tsa-cobre-500);
  /* Véus e sombras, sempre a partir da paleta. */
  --tsa-veu: color-mix(in srgb, var(--tsa-magnesio-50) 3%, transparent);
  --tsa-veu-forte: color-mix(in srgb, var(--tsa-magnesio-50) 6%, transparent);
  --tsa-sombra: color-mix(in srgb, var(--tsa-carbono-900) 75%, transparent);
  --tsa-fundo-fosco: color-mix(in srgb, var(--tsa-carbono-900) 80%, transparent);
  --tsa-brilho-aco: color-mix(in srgb, var(--tsa-aco-500) 34%, transparent);
}