/* ==========================================================================
   thiago queiroz — cores
   Primitivas extraídas pixel a pixel dos assets originais da marca.
   Nenhuma cor deste design system nasce fora deste arquivo.
   ========================================================================== */

:root {
  /* --- Creme — a cor da marca. Logotipo, selos, frases, texto no escuro. --- */
  --tq-creme-100: #f7f3ec; /* areia — fundo claro */
  --tq-creme-200: #ede6d9;
  --tq-creme-300: #e2d8c4; /* ★ CREME DA MARCA — logotipo, "nunca é linear", selo IA */
  --tq-creme-400: #d3cbb8; /* ★ creme fosco — "sempre sonhando, sempre fazendo" */
  --tq-creme-500: #b9af9a;

  /* --- Coral — a energia. Selo MKT, CTA, destaque. --- */
  --tq-coral-300: #f79274;
  --tq-coral-400: #f46944; /* ★ CORAL DA MARCA — contorno do selo MKT */
  --tq-coral-500: #d9522e;

  /* --- Terracota — o meio-tom quente. Texto dentro do selo MKT. --- */
  --tq-terracota-300: #c78a6b;
  --tq-terracota-400: #b06e4a; /* ★ TERRACOTA — preenchimento do "MKT" */
  --tq-terracota-500: #8e5637;

  /* --- Oliva — o tom calmo, de acerto e método. Selo do check. --- */
  --tq-oliva-300: #9e9463;
  --tq-oliva-400: #827749; /* ★ OLIVA — selo do "correto" (✓) */
  --tq-oliva-500: #675e38;

  /* --- Ferrugem — a profundidade. Contorno da frase-manifesto. --- */
  --tq-ferrugem-400: #a8460f;
  --tq-ferrugem-500: #88360c; /* ★ FERRUGEM — contorno de "sempre sonhando" */
  --tq-ferrugem-600: #6b2a08;

  /* --- Mocha — o fundo e o brilho. --- */
  --tq-mocha-500: #4d260d; /* ★ MOCHA — cor do degradê/glow */
  --tq-mocha-700: #2b1d16; /* tinta no tema claro */
  --tq-mocha-800: #1a1310; /* ★ CARVÃO — fundo do tema escuro */
  --tq-mocha-900: #100b09;

  /* --- Verde de tela — o fundo dos vídeos. Acento frio, uso pontual. --- */
  --tq-verde-400: #00a87a;
  --tq-verde-500: #00805c;

  /* --- Escalas neutras derivadas (usar só quando o semântico não cobrir) --- */
  --tq-branco: #fffdf9;
  --tq-preto: #0a0706;
}

/* --------------------------------------------------------------------------
   Semântica por tema.
   Nenhum tema é o padrão: `<Tema modo="claro">` ou `<Tema modo="escuro">`
   é obrigatório. O seletor abaixo é o contrato — componentes leem só
   os tokens semânticos, nunca as primitivas.
   -------------------------------------------------------------------------- */

[data-tq-tema="escuro"] {
  --tq-fundo: var(--tq-mocha-800);
  --tq-fundo-profundo: var(--tq-mocha-900);
  --tq-fundo-elevado: #241a15;
  --tq-fundo-sutil: rgba(226, 216, 196, 0.06);

  --tq-tinta: var(--tq-creme-300); /* 12.98:1 */
  --tq-tinta-suave: var(--tq-creme-400); /* 11.36:1 */
  --tq-tinta-fraca: #9c8f7e; /* 5.80:1 */
  --tq-tinta-invertida: var(--tq-mocha-900);

  --tq-borda: rgba(226, 216, 196, 0.18);
  --tq-borda-forte: var(--tq-creme-300);

  --tq-acento: var(--tq-coral-400); /* 6.07:1 sobre o fundo */
  --tq-acento-tinta: var(--tq-mocha-900); /* 6.47:1 sobre o acento */
  --tq-calmo: var(--tq-oliva-300); /* 6.00:1 */
  --tq-profundo: var(--tq-ferrugem-400);
  --tq-sinal: var(--tq-verde-400);

  --tq-glow: var(--tq-mocha-500);
  --tq-glow-forca: 0.55;

  color-scheme: dark;
}

[data-tq-tema="claro"] {
  --tq-fundo: var(--tq-creme-100);
  --tq-fundo-profundo: var(--tq-creme-200);
  --tq-fundo-elevado: var(--tq-branco);
  --tq-fundo-sutil: rgba(43, 29, 22, 0.05);

  --tq-tinta: var(--tq-mocha-700); /* 14.72:1 */
  --tq-tinta-suave: #5a4438; /* 8.19:1 */
  --tq-tinta-fraca: #7c6759; /* 4.82:1 */
  --tq-tinta-invertida: var(--tq-creme-100);

  --tq-borda: rgba(43, 29, 22, 0.14);
  --tq-borda-forte: var(--tq-mocha-700);

  /* No tema claro o coral é COR DE PREENCHIMENTO E TRAÇO, nunca de texto
     (2.73:1 sobre areia). O acento de texto no claro é a ferrugem (7.36:1). */
  --tq-acento: var(--tq-coral-400);
  --tq-acento-tinta: var(--tq-mocha-900); /* 6.47:1 sobre o acento */
  --tq-acento-texto: var(--tq-ferrugem-500); /* 7.36:1 — acento legível em texto */
  --tq-calmo: var(--tq-oliva-500); /* 5.87:1 */
  --tq-profundo: var(--tq-ferrugem-500); /* 7.36:1 */
  --tq-sinal: var(--tq-verde-500);

  --tq-glow: var(--tq-mocha-500);
  --tq-glow-forca: 0.22;

  color-scheme: light;
}

/* No escuro o acento já é legível em texto — o alias existe nos dois temas
   para que um componente nunca precise saber em qual tema está. */
[data-tq-tema="escuro"] {
  --tq-acento-texto: var(--tq-coral-400);
}