/* =============================================================================

THEMES

Regra de leitura:
  --brand-*   → primitivo de cor. Definido em tokens.css. Só theme.css consome.
  --system-*  → papel ou escala. Definido em tokens.css / theme.css. Livre em componente.
  sem prefixo → var local. Definida no arquivo que você está lendo.

============================================================================= */


/* ── TINTA ATIVA ──
   Declarada uma vez aqui; cada [data-theme] e [data-surface] adiante
   re-declara só as variáveis que precisam mudar. Como var() é substituído
   no elemento em que a regra se aplica, isso faz cada contexto calcular
   seu próprio conjunto derivado sem herança indesejada. */

:root,
[data-theme],
[data-surface] {
	--system-fg:            var(--system-fg-on-surface);
	--system-fg-adjustment: var(--system-fg-adjustment-surface, 1);

	/* A marca como conteúdo. Default = a própria âncora de paleta; só
	   sobrescrito onde a superfície É essa cor e ela deixaria de ler. */
	--system-fg-primary:   var(--brand-primary);
	--system-fg-secondary: var(--brand-secondary);

	/* Par estável: tinta sobre --brand-primary usado como FILL.
	   Não inverte com o tema — diferente de --system-fg-on-primary, que no
	   orange acompanha o fill da superfície (sand). Personalização de
	   produto escreve aqui para sobreviver dentro de [data-surface="box"]. */
	--system-fg-on-brand: var(--brand-sand);

	/* Tinta em opacidade reduzida. "muted" = 60 % (parágrafos de apoio);
	   "subtle" = 45 % (metadados, legendas). O sufixo descreve o efeito
	   visual sem codificar o valor — se o ponto mudar, o nome continua certo. */
	--system-fg-muted:  color-mix(in srgb, var(--system-fg) calc(60% * var(--system-fg-adjustment)), transparent);
	--system-fg-subtle: color-mix(in srgb, var(--system-fg) calc(45% * var(--system-fg-adjustment)), transparent);

	--system-bg-tint:       color-mix(in srgb, var(--system-fg)  10%, transparent);
	--system-bg-tint-hover: color-mix(in srgb, var(--system-fg)  16%, transparent);
	--system-border-hairline: color-mix(in srgb, var(--system-fg) 12%, transparent);
}


/* ── FUNDOS NOMEADOS ──
   Duas partes do sistema precisam saber o fundo de um tema irmão:
   (1) a faixa do notch, que pinta o fundo da seção anterior, e
   (2) o side-tool single-content-bg, que cria swatches de troca de tema.
   Nomear evita que apontem para o primitivo e descolem do tema — trocar
   a cor de um tema continua sendo mudar uma linha. */

:root {
	--system-bg-surface-light:     var(--brand-sand);
	--system-bg-surface-dark:      var(--brand-black);
	--system-bg-surface-orange:    var(--brand-orange);
	--system-bg-surface-dark-sand: var(--brand-dark-sand);
}


/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT
   ═══════════════════════════════════════════════════════════════════════════ */

:root,
[data-theme="light"] {
	/* Âncoras de marca — sobrescritas inline pelo ACF por produto */
	--brand-primary:   var(--brand-orange);
	--brand-secondary: var(--brand-dark-sand);

	/* Superfície */
	--system-bg-surface:             var(--system-bg-surface-light);
	--system-fg-on-surface:          var(--brand-black);
	--system-fg-adjustment-surface:  1;

	/* Fill primário ↔ par */
	--system-bg-primary:             var(--brand-primary);
	--system-fg-on-primary:          var(--brand-sand);
	--system-fg-adjustment-primary:  1;

	/* Fill secundário ↔ par */
	--system-bg-secondary:           var(--brand-secondary);
	--system-fg-on-secondary:        var(--brand-sand);
	--system-fg-adjustment-secondary: 1;

	/* Box ↔ par */
	--system-bg-box:                 var(--brand-sand-96);
	--system-bg-box-hover:           var(--brand-sand-97);
	--system-bg-box-nested:          var(--brand-black-a5);
	--system-fg-on-box:              var(--brand-black);
	--system-fg-adjustment-box:      1;

	/* Componentes globais */
	--system-button-bg:              var(--system-bg-primary);
	--system-button-fg:              var(--system-fg-on-primary);
	--system-button-hover-bg:        var(--brand-dark-sand);
	--system-button-hover-fg:        var(--system-fg-on-primary);
	--system-chips-fg:               var(--system-fg-primary);
}


/* ═══════════════════════════════════════════════════════════════════════════
   DARK
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
	--brand-primary:   var(--brand-orange);
	--brand-secondary: var(--brand-dark-sand);

	--system-bg-surface:             var(--system-bg-surface-dark);
	--system-fg-on-surface:          var(--brand-sand);
	--system-fg-adjustment-surface:  1;

	--system-bg-primary:             var(--brand-primary);
	--system-fg-on-primary:          var(--brand-sand);
	--system-fg-adjustment-primary:  1.3;

	--system-bg-secondary:           var(--brand-secondary);
	--system-fg-on-secondary:        var(--brand-sand);
	--system-fg-adjustment-secondary: 1;

	--system-bg-box:                 var(--brand-black-23);
	--system-bg-box-hover:           var(--brand-black-25);
	--system-bg-box-nested:          var(--brand-black-20);
	--system-fg-on-box:              var(--brand-sand);
	--system-fg-adjustment-box:      1;

	--system-button-bg:              var(--system-bg-primary);
	--system-button-fg:              var(--system-fg-on-primary);
	--system-button-hover-bg:        var(--brand-dark-sand);
	--system-button-hover-fg:        var(--system-fg-on-primary);
	--system-chips-fg:               var(--system-fg-primary);
}


/* ═══════════════════════════════════════════════════════════════════════════
   ORANGE
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="orange"] {
	/* O fill primário inverte: a superfície é laranja, então a "primary" do
	   fill passa a ser sand para criar contraste. Isso é legítimo — a âncora
	   de marca (--brand-primary = laranja) permanece, mas o fill da superfície
	   precisa de outra cor. */
	--brand-primary:   var(--brand-orange);
	--brand-secondary: var(--brand-dark-sand);

	--system-bg-surface:             var(--system-bg-surface-orange);
	--system-fg-on-surface:          var(--brand-sand);
	--system-fg-adjustment-surface:  1.4;

	--system-bg-primary:             var(--brand-sand);
	--system-fg-on-primary:          var(--brand-orange);
	--system-fg-adjustment-primary:  1.3;

	--system-bg-secondary:           var(--brand-dark-sand);
	--system-fg-on-secondary:        var(--brand-sand);
	--system-fg-adjustment-secondary: 1.3;

	--system-bg-box:                 var(--brand-sand-96);
	--system-bg-box-hover:           var(--brand-sand-97);
	--system-bg-box-nested:          var(--brand-sand-a20);
	--system-fg-on-box:              var(--brand-black);
	--system-fg-adjustment-box:      1;

	/* A superfície é laranja e o fill primário é sand, então tanto
	   --brand-primary (laranja) quanto --brand-secondary (dark-sand)
	   não leem bem sobre o fundo. Ambos cedem para a tinta da superfície. */
	--system-fg-primary:   var(--system-fg-on-surface);
	--system-fg-secondary: var(--system-fg-on-surface);

	--system-button-bg:              var(--system-bg-primary);
	--system-button-fg:              var(--system-fg-on-primary);
	--system-button-hover-bg:        var(--system-bg-primary);
	--system-button-hover-fg:        var(--system-fg-on-primary);
	--system-chips-fg:               var(--system-fg-on-surface);
}


/* ═══════════════════════════════════════════════════════════════════════════
   DARK-SAND
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark-sand"] {
	--brand-primary:   var(--brand-orange);
	--brand-secondary: var(--brand-dark-sand);

	--system-bg-surface:             var(--system-bg-surface-dark-sand);
	--system-fg-on-surface:          var(--brand-sand);
	--system-fg-adjustment-surface:  1.3;

	/* Primary fill = marca (laranja). Diferente do orange: aqui a superfície
	   NÃO é a âncora primary, então botão/CTA/aspas podem (e devem) pintar
	   laranja com tinta sand. Painéis sand usam --system-bg-box. */
	--system-bg-primary:             var(--brand-primary);
	--system-fg-on-primary:          var(--brand-sand);
	--system-fg-adjustment-primary:  1.3;

	/* Superfície JÁ é dark-sand (= --brand-secondary), então o fill secundário
	   não pode repetir a âncora — vira véu sand transparente sobre a superfície.
	   Tinta do véu = sand (lê sobre dark-sand), não preto. */
	--system-bg-secondary:           var(--brand-sand-a20);
	--system-fg-on-secondary:        var(--brand-sand);
	--system-fg-adjustment-secondary: 1.3;

	--system-bg-box:                 var(--brand-sand-96);
	--system-bg-box-hover:           var(--brand-sand-97);
	--system-bg-box-nested:          var(--brand-sand-a20);
	--system-fg-on-box:              var(--brand-black);
	--system-fg-adjustment-box:      1;

	/* --brand-secondary (dark-sand) é a própria superfície, então cede
	   para a tinta. --brand-primary (laranja) lê bem sobre dark-sand. */
	--system-fg-secondary: var(--system-fg-on-surface);

	--system-button-bg:              var(--system-bg-primary);
	--system-button-fg:              var(--system-fg-on-primary);
	--system-button-hover-bg:        var(--system-bg-primary);
	--system-button-hover-fg:        var(--system-fg-on-primary);
	--system-chips-fg:               var(--system-fg-on-surface);
}


/* A home imprime o laranja com tinta preta: só a tinta muda, tudo mais
   (fills, fg-primary, fg-secondary) acompanha automaticamente porque
   derivam de --system-fg-on-surface. */
[data-theme="orange"][data-ink="dark"] {
	--system-fg-on-surface: var(--brand-black);
}


/* ═══════════════════════════════════════════════════════════════════════════
   CONTEXTOS DE SUPERFÍCIE
   ═══════════════════════════════════════════════════════════════════════════ */

/* Um bloco/card que declara data-surface troca a tinta ativa para o par
   correto daquele fill. O componente não escolhe cor — só informa que
   superfície ele é. O paint do fundo é responsabilidade do componente,
   que aponta para --system-bg-{box|primary|secondary}. */

[data-surface="box"] {
	--system-fg-adjustment: var(--system-fg-adjustment-box);
	--system-fg:            var(--system-fg-on-box);
	/* Box é superfície neutra em qualquer tema; a marca volta a ler. */
	--system-fg-primary:    var(--brand-primary);
	--system-fg-secondary:  var(--brand-secondary);

	/* Fill primário também volta à âncora. No theme orange o fill da
	   superfície vira sand (contraste sobre laranja) — mas box JÁ é sand
	   (--system-bg-box), então sand-on-box some. Badge, chip, número e
	   botão dentro do box precisam da marca de novo, não do fill invertido. */
	--system-bg-primary:    var(--brand-primary);
	--system-fg-on-primary: var(--system-fg-on-brand);
	--system-button-bg:     var(--system-bg-primary);
	--system-button-fg:     var(--system-fg-on-primary);
	--system-button-hover-bg: var(--brand-dark-sand);
	--system-button-hover-fg: var(--system-fg-on-primary);
	--system-chips-fg:      var(--brand-primary);
}

[data-surface="primary"] {
	--system-fg-adjustment: var(--system-fg-adjustment-primary);
	--system-fg:            var(--system-fg-on-primary);
	/* Sobre fundo primário só a tinta contrasta com certeza. */
	--system-fg-primary:    var(--system-fg-on-primary);
	--system-fg-secondary:  var(--system-fg-on-primary);
	--system-chips-fg:      var(--system-fg-on-primary);
}

[data-surface="secondary"] {
	--system-fg-adjustment: var(--system-fg-adjustment-secondary);
	--system-fg:            var(--system-fg-on-secondary);
	--system-fg-primary:    var(--system-fg-on-secondary);
	--system-fg-secondary:  var(--system-fg-on-secondary);
	--system-chips-fg:      var(--system-fg-on-secondary);
}