/**
 * Traventia Design System — tokens.
 *
 * Fonte única de verdade para cor, tipografia, espaçamento, raio, sombra,
 * transição e z-index. Todo componente em assets/css/components/ e toda
 * página em assets/css/pages/ consome estas variáveis — nunca hardcode um
 * valor de cor/espaçamento novo fora daqui.
 *
 * Tema escuro (v0.8.0, "Finalização Premium"): paleta trocada de claro para
 * escuro em todo o site. Contraste WCAG AA verificado matematicamente (não
 * por olho) para os pares texto/fundo mais usados — ver notas inline.
 *
 * Breakpoints (documentados aqui, usados como literal nas media queries de
 * cada arquivo — CSS custom properties não funcionam dentro de @media):
 *   mobile:  até 479px
 *   tablet:  480px – 767px
 *   small:   768px – 1023px
 *   desktop: 1024px – 1279px
 *   wide:    a partir de 1280px
 */

:root {
	/* ===== Cor — primária (dourado/areia) ===== */
	--tv-primary: #C9A27A;
	--tv-primary-dark: #B58863;
	/* Tint translúcido — usado como fundo suave (hover de linha, chip, realce),
	   nunca como cor sólida: combina com qualquer superfície escura sem
	   precisar de uma variante dedicada por superfície. */
	--tv-primary-light: rgba(201, 162, 122, 0.15);
	/* Contraste #C9A27A vs #14120F = 7.96:1 (passa AA). Só que texto BRANCO
	   sobre botão dourado dá 2.35:1 (reprova até AA large) — por isso o
	   texto/ícone sobre fundo dourado precisa ser escuro, não branco. */
	--tv-primary-contrast: #14120F;

	/* ===== Cor — superfícies ===== */
	--tv-bg: #14120F;
	--tv-bg-alt: #10232A;
	/* Cards, inputs, modais, dropdowns — qualquer elemento "elevado" sobre o fundo. */
	--tv-surface: #1C2B31;
	--tv-surface-hover: #223640;
	/* Placeholder de mídia (skeleton, .tv-card-media sem imagem, avatar vazio). */
	--tv-surface-alt: #24343B;
	--tv-overlay: rgba(10, 9, 7, 0.72);

	--tv-border: rgba(255, 255, 255, 0.08);
	--tv-border-strong: rgba(255, 255, 255, 0.16);
	--tv-border-gold: rgba(201, 162, 122, 0.4);

	--tv-text: #D3C3B9;
	--tv-text-heading: #FFFFFF;
	--tv-text-muted: #A79E9C;
	--tv-text-on-primary: var(--tv-primary-contrast);

	/* ===== Cor — semânticos (recalibrados para fundo escuro: versões mais
	   claras/saturadas do que as do tema claro original, senão ficam
	   ilegíveis sobre #14120F/#1C2B31) ===== */
	--tv-success: #6EE7A8;
	--tv-success-bg: rgba(110, 231, 168, 0.12);
	--tv-error: #F87171;
	--tv-error-bg: rgba(248, 113, 113, 0.12);
	--tv-warning: #FBBF24;
	--tv-warning-bg: rgba(251, 191, 36, 0.12);
	--tv-info: #7DB8F5;
	--tv-info-bg: rgba(125, 184, 245, 0.12);

	/* ===== Tipografia — pilha de sistema, zero custo de rede ===== */
	--tv-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--tv-text-xs: 0.75rem;   /* 12px */
	--tv-text-sm: 0.875rem;  /* 14px */
	--tv-text-base: 1rem;    /* 16px */
	--tv-text-lg: 1.125rem;  /* 18px */
	--tv-text-xl: 1.25rem;   /* 20px */
	--tv-text-2xl: 1.5rem;   /* 24px */
	--tv-text-3xl: 1.875rem; /* 30px */
	--tv-text-4xl: 2.25rem;  /* 36px */
	--tv-text-5xl: 3rem;     /* 48px */

	--tv-font-normal: 400;
	--tv-font-medium: 500;
	--tv-font-semibold: 600;
	--tv-font-bold: 700;

	--tv-leading-tight: 1.2;
	--tv-leading-normal: 1.5;
	--tv-leading-relaxed: 1.7;

	/* ===== Espaçamento ===== */
	--tv-space-1: 4px;
	--tv-space-2: 8px;
	--tv-space-3: 12px;
	--tv-space-4: 16px;
	--tv-space-6: 24px;
	--tv-space-8: 32px;
	--tv-space-12: 48px;
	--tv-space-16: 64px;
	--tv-space-24: 96px;

	/* ===== Raio de borda ===== */
	--tv-radius-sm: 6px;
	--tv-radius-md: 10px;
	--tv-radius-lg: 16px;
	--tv-radius-xl: 24px;
	--tv-radius-full: 999px;

	/* ===== Sombra — em fundo já escuro, sombra preta "some". Em vez disso,
	   profundidade via escurecimento (preto translúcido, mais barato que
	   blur grande) + glow dourado sutil para elementos de destaque. ===== */
	--tv-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
	--tv-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 20px rgba(201, 162, 122, 0.06);
	--tv-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 32px rgba(201, 162, 122, 0.08);
	--tv-shadow-xl: 0 28px 64px rgba(0, 0, 0, 0.55), 0 0 48px rgba(201, 162, 122, 0.1);

	/* ===== Transição ===== */
	--tv-transition-fast: 120ms ease;
	--tv-transition-base: 200ms ease;
	--tv-transition-slow: 320ms ease;

	/* ===== Z-index ===== */
	--tv-z-dropdown: 100;
	--tv-z-sticky: 200;
	--tv-z-modal: 1000;
	--tv-z-toast: 1100;

	/* ===== Container ===== */
	--tv-container-width: 1180px;
}

/* ===== Reset leve + base tipográfica (escopado às áreas do plugin) ===== */

.traventia-scope,
.traventia-scope * {
	box-sizing: border-box;
}

.traventia-scope {
	background: var(--tv-bg);
	font-family: var(--tv-font);
	color: var(--tv-text);
	line-height: var(--tv-leading-normal);
	-webkit-font-smoothing: antialiased;
}

.traventia-scope img { max-width: 100%; height: auto; display: block; }

.traventia-scope a { color: inherit; }

.traventia-scope h1,
.traventia-scope h2,
.traventia-scope h3,
.traventia-scope h4 {
	line-height: var(--tv-leading-tight);
	font-weight: var(--tv-font-semibold);
	color: var(--tv-text-heading);
	margin: 0 0 var(--tv-space-3);
}

.traventia-container {
	max-width: var(--tv-container-width);
	margin: 0 auto;
	padding: 0 var(--tv-space-6);
}

@media (max-width: 767px) {
	.traventia-container { padding: 0 var(--tv-space-4); }
}

/* ===== Acessibilidade — foco visível consistente em toda a área do plugin ===== */

.traventia-scope :focus-visible {
	outline: 2px solid var(--tv-primary);
	outline-offset: 2px;
}

.traventia-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--tv-primary);
	color: var(--tv-primary-contrast);
	padding: var(--tv-space-2) var(--tv-space-4);
	border-radius: 0 0 var(--tv-radius-sm) 0;
	z-index: var(--tv-z-toast);
}

.traventia-skip-link:focus { left: 0; }

/* ===== Utilitário de texto discreto ===== */

.traventia-text-muted { color: var(--tv-text-muted); }