/**
 * PopShow — Design Tokens
 * Fonte única de verdade: cores, tipografia, espaço, movimento e camadas.
 * Consumido por todo o tema e exposto no painel de opções (fase 4).
 */

:root {
	/* ---- Marca (extraído da logo) ---- */
	--ps-carvao: #0B0A1C;
	--ps-volt: #D3FF00;
	--ps-ultra: #6F26FF;
	--ps-branco: #FFFFFF;

	/* ---- Editorias ----
	 * Cada editoria tem três papéis:
	 *   --ps-ed-X    preenchimento (chip, barra, dot, gradiente)
	 *   --ps-ink-X   texto sobre a superfície da página (varia por tema, AA)
	 *   --ps-on-X    texto/ícone POR CIMA do preenchimento (AA garantido)
	 */
	--ps-ed-musica: #FF3DAE;
	--ps-ed-filmes: #FFB320;
	--ps-ed-series: #6F26FF;
	--ps-ed-noticias: #00C8FF;
	--ps-ed-games: #D3FF00;
	--ps-ed-esportes: #00E676;

	/* Tinta sobre o preenchimento — TEXTO PEQUENO (chips, tags): AA 4.5.
	 * Carvão em tudo, branco só no ultravioleta. */
	--ps-on-musica: #0B0A1C;
	--ps-on-filmes: #0B0A1C;
	--ps-on-series: #FFFFFF;
	--ps-on-noticias: #0B0A1C;
	--ps-on-games: #0B0A1C;
	--ps-on-esportes: #0B0A1C;

	/* Tinta sobre o preenchimento — TEXTO GRANDE (títulos de seção): AA 3:1.
	 * Rosa e ultravioleta aguentam branco (3.22 e 6.18) e ficam mais bonitos
	 * assim; as cores claras continuam pedindo carvão. */
	--ps-ontitulo-musica: #FFFFFF;
	--ps-ontitulo-filmes: #0B0A1C;
	--ps-ontitulo-series: #FFFFFF;
	--ps-ontitulo-noticias: #0B0A1C;
	--ps-ontitulo-games: #0B0A1C;
	--ps-ontitulo-esportes: #0B0A1C;

	/* Tinta para superfícies de tema FIXO (independem do tema do leitor):
	 * -inkc = sobre claro (cards brancos da seção de editoria)
	 * -inkd = sobre escuro (faixa de vídeos, véus)
	 */
	--ps-inkc-musica: #DA007F;
	--ps-inkc-filmes: #9A6600;
	--ps-inkc-series: #6F26FF;
	--ps-inkc-noticias: #007A9B;
	--ps-inkc-games: #647800;
	--ps-inkc-esportes: #008243;

	--ps-inkd-musica: #FF3DAE;
	--ps-inkd-filmes: #FFB320;
	--ps-inkd-series: #935CFF;
	--ps-inkd-noticias: #00C8FF;
	--ps-inkd-games: #D3FF00;
	--ps-inkd-esportes: #00E676;

	/* ---- Tipografia ---- */
	--ps-font-display: 'Archivo Black', 'Archivo', system-ui, sans-serif;
	/* Cabeçalhos de seção (MÚSICA, EM ALTA, MAIS LIDAS…): condensada e pesada. */
	--ps-font-secao: 'Anton', 'Archivo Black', system-ui, sans-serif;
	--ps-font-head: 'Archivo', system-ui, sans-serif;
	--ps-font-body: 'Inter', system-ui, sans-serif;
	--ps-font-num: 'Space Grotesk', ui-monospace, monospace;

	--ps-display-1: clamp(2.2rem, 5.5vw, 4.2rem);
	--ps-display-2: clamp(1.6rem, 3.5vw, 2.6rem);
	--ps-title: clamp(1.15rem, 2vw, 1.5rem);
	--ps-title-card: clamp(1rem, 1.4vw, 1.125rem);
	--ps-body-size: clamp(1rem, 1.05vw, 1.0625rem);
	--ps-small: 0.8125rem;
	--ps-tiny: 0.6875rem;

	/* ---- Espaço ---- */
	--ps-sp-1: 0.25rem;
	--ps-sp-2: 0.5rem;
	--ps-sp-3: 0.75rem;
	--ps-sp-4: 1rem;
	--ps-sp-5: 1.5rem;
	--ps-sp-6: 2rem;
	--ps-sp-7: 3rem;
	--ps-sp-8: 4rem;
	--ps-gutter: clamp(1rem, 3vw, 1.5rem);
	--ps-section: clamp(2.5rem, 6vw, 4.5rem);

	/* ---- Formas ---- */
	--ps-radius-sm: 10px;
	--ps-radius: 16px;
	--ps-radius-lg: 24px;
	--ps-radius-full: 999px;
	--ps-blur: 14px;

	/* ---- Movimento ---- */
	--ps-t-fast: 160ms;
	--ps-t: 240ms;
	--ps-t-slow: 400ms;
	--ps-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
	--ps-ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);

	/* ---- Layout ---- */
	--ps-container: 1200px;
	--ps-container-narrow: 760px;
	--ps-header-h: 74px;
	--ps-bottombar-h: 60px;

	/* ---- Camadas ---- */
	--ps-z-header: 100;
	--ps-z-topo: 150;
	--ps-z-bottombar: 180;
	--ps-z-panel: 200;
	--ps-z-overlay: 300;
}

/* ==== DARK (padrão) ==== */
:root,
[data-theme='dark'] {
	color-scheme: dark;
	--ps-bg: #0B0A1C;
	--ps-surface: #14132B;
	--ps-elevated: #1D1C3A;
	--ps-border: rgba(255, 255, 255, 0.08);
	--ps-border-strong: rgba(255, 255, 255, 0.16);
	--ps-text: #F4F4FA;
	--ps-text-2: #A8A7C4;
	--ps-text-3: #6E6D8F;

	/* No dark o volt é o acento de ação; no light ele vira selo (contraste). */
	--ps-accent: var(--ps-volt);
	--ps-accent-ink: #0B0A1C;
	--ps-link: var(--ps-volt);

	--ps-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
	--ps-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5);
	--ps-glow: 0 0 24px rgba(211, 255, 0, 0.18);
	--ps-scrim: rgba(11, 10, 28, 0.65);
	--ps-header-bg: rgba(11, 10, 28, 0.82);

	/* Tinta de texto por editoria no dark: só o ultravioleta precisa clarear. */
	--ps-ink-musica: #FF3DAE;
	--ps-ink-filmes: #FFB320;
	--ps-ink-series: #935CFF;
	--ps-ink-noticias: #00C8FF;
	--ps-ink-games: #D3FF00;
	--ps-ink-esportes: #00E676;
}

/* ==== LIGHT ==== */
[data-theme='light'] {
	color-scheme: light;
	--ps-bg: #F7F6F1;
	--ps-surface: #FFFFFF;
	--ps-elevated: #FFFFFF;
	--ps-border: rgba(11, 10, 28, 0.1);
	--ps-border-strong: rgba(11, 10, 28, 0.2);
	--ps-text: #0B0A1C;
	--ps-text-2: #5A5972;
	--ps-text-3: #8B8AA3;

	--ps-accent: var(--ps-ultra);
	--ps-accent-ink: #FFFFFF;
	--ps-link: var(--ps-ultra);

	--ps-shadow: 0 10px 30px rgba(11, 10, 28, 0.08);
	--ps-shadow-lg: 0 24px 60px rgba(11, 10, 28, 0.14);
	--ps-glow: 0 0 24px rgba(111, 38, 255, 0.14);
	--ps-scrim: rgba(11, 10, 28, 0.45);
	--ps-header-bg: rgba(247, 246, 241, 0.85);

	/* No claro as cores puras somem sobre off-white: versões escurecidas
	 * que passam AA 4.5 tanto sobre #F7F6F1 quanto sobre #FFFFFF. */
	--ps-ink-musica: #DA007F;
	--ps-ink-filmes: #9A6600;
	--ps-ink-series: #6F26FF;
	--ps-ink-noticias: #007A9B;
	--ps-ink-games: #647800;
	--ps-ink-esportes: #008243;
}