/* The VibeCritic — temas por momento do dia.
   <html data-momento="dia|tarde|noite"> é definido por /js/tema.js (hora local, ou escolha salva do visitante).

   Tokens semânticos (use estes nas páginas):
     --bg --bg-2            fundo da página e faixas alternadas
     --surface --surface-2  cards e painéis
     --line                 bordas finas
     --fg --muted           texto principal e secundário
     --accent               cor de ação (botões principais, links ativos)
     --accent-2 --accent-3  cores de apoio (etiquetas, destaques, gráficos)
     --on-accent            texto sobre --accent
     --glow                 cor de brilho/gradiente do hero
     --cat-dia --cat-tarde --cat-noite --cat-wellness   cores fixas das categorias (iguais nos 3 temas)

   Tokens extras (opcionais, acrescentados depois — use se ajudar):
     --line-strong          borda com mais presença (inputs, cards em foco)
     --accent-soft          fundo suave da cor de ação (chips ativos, hover)
     --ring                 contorno de foco (outline: 2px solid var(--ring))
     --grad-hero            fundo do hero: background: var(--grad-hero);
     --grad-texto           gradiente p/ título: background: var(--grad-texto); -webkit-background-clip: text; color: transparent;
     --shadow --shadow-lg   sombras (no dia são quentes e leves; à noite, profundas)
     --selection            fundo da seleção de texto

   Os nomes antigos (--ink, --night, --panel, --panel-2, --lime, --pink, --blue, --amber) continuam
   apontando para os novos, para as páginas funcionarem enquanto migram.
   O seletor html[data-momento] vence o :root das páginas (especificidade maior).

   Escopo local (guia de estilo, prévias): um elemento com class="tema-escopo" data-momento="dia|tarde|noite"
   recebe os tokens daquele momento, independentemente do tema da página. Sem a classe .tema-escopo,
   um data-momento num card/elemento interno NÃO muda as cores (pode ser usado como dado à vontade).

   Contraste (WCAG 2.2), conferido por script — tabela em /estilo:
     --fg sobre --bg/--bg-2/--surface/--surface-2 ≥ 7:1 · --muted ≥ 4.5:1 · --on-accent sobre --accent ≥ 4.5:1
     --accent/--accent-2/--accent-3/--warn como texto sobre --bg ≥ 4.5:1 (no dia também)
     --cat-* (ponto da .cat-tag) ≥ 3:1 sobre --bg nos 3 temas; texto da .cat-tag usa --fg (≥ 7:1).
   Direção de cor e referências: docs-tema.md, seção "Direção de cor". */

html[data-momento], html .tema-escopo[data-momento] {
  /* Categorias: tons médios (luminância ~0,19–0,25), legíveis sobre papel claro e sobre preto. */
  --cat-dia: #E35D0B;       /* sol: open airs, day parties, praia */
  --cat-tarde: #E8406E;     /* pôr do sol: rooftops, sunset sessions */
  --cat-noite: #7B5CFF;     /* noite: clubes, festas */
  --cat-wellness: #139874;  /* wellness: ecstatic dance, sober rave, sound bath */
  --tema-transicao: background-color .6s ease, color .6s ease, border-color .6s ease;
}

/* DIA — papel solar e tinta: a luz de um open air ao meio-dia. Irmão claro da noite:
   o azul elétrico vira cobalto, o rosa vira vermelhão de sol, o lima vira folha-lima. */
html[data-momento="dia"], html .tema-escopo[data-momento="dia"] {
  color-scheme: light;
  --bg: #F6F0E4; --bg-2: #EDE3D1;
  --surface: #FFFCF6; --surface-2: #F1E8D9;
  --line: rgba(40,28,10,.13);
  --line-strong: rgba(40,28,10,.26);
  --fg: #16120C; --muted: #5E5443;
  --accent: #2436EE;  --on-accent: #FFFFFF;    /* cobalto elétrico */
  --accent-2: #C93A10;                          /* vermelhão de sol */
  --accent-3: #467510;                          /* folha-lima */
  --warn: #9A5B00;
  --glow: #FFB547;                              /* sol */
  --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
  --ring: #2436EE;
  --grad-hero:
    radial-gradient(110% 70% at 88% -12%, color-mix(in srgb, #FFB547 70%, transparent) 0%, transparent 58%),
    radial-gradient(70% 55% at -5% 8%, color-mix(in srgb, #FF7A3D 22%, transparent) 0%, transparent 62%),
    linear-gradient(180deg, #FBF5EA 0%, var(--bg) 70%);
  --grad-texto: linear-gradient(100deg, #C93A10 0%, #E35D0B 45%, #2436EE 100%);
  --shadow: 0 1px 2px rgba(70,45,10,.06), 0 6px 18px -8px rgba(70,45,10,.16);
  --shadow-lg: 0 2px 6px rgba(70,45,10,.06), 0 24px 48px -20px rgba(70,45,10,.28);
  --selection: color-mix(in srgb, #FFB547 55%, transparent);
}

/* TARDE — golden hour: vinho do entardecer com damasco, rosa e ouro. Irmã morna da noite. */
html[data-momento="tarde"], html .tema-escopo[data-momento="tarde"] {
  color-scheme: dark;
  --bg: #210E1A; --bg-2: #2B1422;
  --surface: #34192A; --surface-2: #422236;
  --line: rgba(255,232,214,.14);
  --line-strong: rgba(255,232,214,.28);
  --fg: #FFF1E6; --muted: #D6AE9F;
  --accent: #FFA24C;  --on-accent: #2A0F12;    /* damasco */
  --accent-2: #FF5C8A;                          /* rosa pôr do sol */
  --accent-3: #FFD36E;                          /* dourado */
  --warn: #FFC23D;
  --glow: #FF6B5A;
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --ring: #FFD36E;
  --grad-hero:
    radial-gradient(120% 70% at 50% 118%, color-mix(in srgb, #FFA24C 60%, transparent) 0%, transparent 55%),
    radial-gradient(90% 60% at 50% 105%, color-mix(in srgb, #FF5C8A 45%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, #1A0B15 0%, var(--bg) 60%, #3A1626 100%);
  --grad-texto: linear-gradient(100deg, #FFD36E 0%, #FFA24C 40%, #FF5C8A 100%);
  --shadow: 0 1px 0 rgba(255,232,214,.05) inset, 0 10px 28px -12px rgba(10,0,6,.65);
  --shadow-lg: 0 1px 0 rgba(255,232,214,.06) inset, 0 30px 60px -24px rgba(10,0,6,.8);
  --selection: color-mix(in srgb, #FF5C8A 45%, transparent);
}

/* NOITE — a identidade original: preto profundo, lima elétrico, rosa e azul neon. (Valores da marca: não mexer.) */
html[data-momento="noite"], html .tema-escopo[data-momento="noite"] {
  color-scheme: dark;
  --bg: #07060B; --bg-2: #0E0C16;
  --surface: #13101D; --surface-2: #1E1A2E;
  --line: rgba(241,238,248,.12);
  --line-strong: rgba(241,238,248,.24);
  --fg: #F1EEF8; --muted: #9690AE;
  --accent: #C8FF2E;  --on-accent: #07060B;    /* lima */
  --accent-2: #FF3DA5;                          /* rosa */
  --accent-3: #4A5BFF;                          /* azul */
  --warn: #FFC23D;
  --glow: #7B5CFF;
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --ring: #C8FF2E;
  --grad-hero:
    radial-gradient(80% 60% at 82% -8%, color-mix(in srgb, #7B5CFF 50%, transparent) 0%, transparent 60%),
    radial-gradient(60% 50% at 8% 4%, color-mix(in srgb, #FF3DA5 26%, transparent) 0%, transparent 62%),
    radial-gradient(50% 40% at 50% 110%, color-mix(in srgb, #4A5BFF 30%, transparent) 0%, transparent 70%),
    var(--bg);
  --grad-texto: linear-gradient(100deg, #C8FF2E 0%, #FF3DA5 55%, #4A5BFF 100%);
  --shadow: 0 1px 0 rgba(241,238,248,.04) inset, 0 10px 30px -12px rgba(0,0,0,.7);
  --shadow-lg: 0 1px 0 rgba(241,238,248,.05) inset, 0 30px 70px -24px rgba(0,0,0,.85), 0 0 60px -30px rgba(123,92,255,.5);
  --selection: color-mix(in srgb, #C8FF2E 35%, transparent);
}

/* Aliases dos nomes antigos. */
html[data-momento], html .tema-escopo[data-momento] {
  --ink: var(--bg); --night: var(--bg-2); --panel: var(--surface); --panel-2: var(--surface-2);
  --lime: var(--accent); --pink: var(--accent-2); --blue: var(--accent-3); --amber: var(--warn);
}

html[data-momento] body { background-color: var(--bg); color: var(--fg); transition: var(--tema-transicao); }
html .tema-escopo[data-momento] { background-color: var(--bg); color: var(--fg); }
html[data-momento] ::selection { background: var(--selection); color: var(--fg); }

/* Seletor de momento: <div data-tema-toggle></div> em qualquer lugar da nav. */
.tema-toggle { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 70%, transparent); font: 500 12px/1 var(--mono, ui-monospace, monospace); }
.tema-toggle button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px;
  border-radius: 999px; color: var(--muted); white-space: nowrap; }
.tema-toggle button:hover { color: var(--fg); }
.tema-toggle button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.tema-toggle button:focus-visible { outline: 2px solid var(--ring, var(--accent-2)); outline-offset: 2px; }
.tema-toggle .tema-rotulo { display: none; }
@media (min-width: 900px) { .tema-toggle .tema-rotulo { display: inline; } }

/* Etiquetas de categoria (agenda, casa, home). Texto em --fg sobre 18% da cor da categoria (≥ 7:1 nos 3 temas). */
.cat-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px;
  font: 500 11px/1 var(--mono, ui-monospace, monospace); letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg); background: color-mix(in srgb, var(--c, var(--accent)) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--c, var(--accent)) 55%, transparent); }
.cat-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--accent)); }
.cat-tag[data-cat="dia"] { --c: var(--cat-dia); }
.cat-tag[data-cat="tarde"] { --c: var(--cat-tarde); }
.cat-tag[data-cat="noite"] { --c: var(--cat-noite); }
.cat-tag[data-cat="wellness"] { --c: var(--cat-wellness); }

@media (prefers-reduced-motion: reduce) { html[data-momento] body { transition: none; } }