/* ============================================================
   v3 TOKENS — Tailwind → CSS literal (Figma Make v3)
   Fonte: src/app/pages/*.tsx + components/*.tsx + index.css
   ============================================================ */

:root {

	/* ── Cores semânticas do v3 ──────────────────────────────── */
	--v3-magenta: #CA047A;
	--v3-laranja: #FF6600;
	--v3-vermelho:#B30000;
	--v3-azul:    #0047FF;
	--v3-verde:   #00C1AC;
	--v3-roxo:    #7C3AED;
	--v3-ambar:   #F59E0B;
	--v3-cafe-rosa: #C8456E;
	--v3-cafe-azul: #1E4FA8;

	/* ── Tons black/X (Tailwind syntax → rgba) ───────────────── */
	--v3-black-05: rgba(0,0,0,0.05);
	--v3-black-10: rgba(0,0,0,0.10);
	--v3-black-15: rgba(0,0,0,0.15);
	--v3-black-20: rgba(0,0,0,0.20);
	--v3-black-25: rgba(0,0,0,0.25);
	--v3-black-30: rgba(0,0,0,0.30);
	--v3-black-35: rgba(0,0,0,0.35);
	--v3-black-40: rgba(0,0,0,0.40);
	--v3-black-45: rgba(0,0,0,0.45);
	--v3-black-50: rgba(0,0,0,0.50);
	--v3-black-55: rgba(0,0,0,0.55);
	--v3-black-60: rgba(0,0,0,0.60);
	--v3-black-65: rgba(0,0,0,0.65);
	--v3-black-70: rgba(0,0,0,0.70);
	--v3-black-75: rgba(0,0,0,0.75);
	--v3-black-80: rgba(0,0,0,0.80);
	--v3-black-90: rgba(0,0,0,0.90);

	--v3-white-05: rgba(255,255,255,0.05);
	--v3-white-10: rgba(255,255,255,0.10);
	--v3-white-15: rgba(255,255,255,0.15);
	--v3-white-20: rgba(255,255,255,0.20);
	--v3-white-25: rgba(255,255,255,0.25);
	--v3-white-30: rgba(255,255,255,0.30);
	--v3-white-40: rgba(255,255,255,0.40);
	--v3-white-50: rgba(255,255,255,0.50);
	--v3-white-55: rgba(255,255,255,0.55);
	--v3-white-60: rgba(255,255,255,0.60);
	--v3-white-65: rgba(255,255,255,0.65);
	--v3-white-70: rgba(255,255,255,0.70);
	--v3-white-80: rgba(255,255,255,0.80);
	--v3-white-90: rgba(255,255,255,0.90);

	/* ── Pesos de fonte (v3 usa font-[NNN] literais) ─────────── */
	--v3-fw-400: 400;
	--v3-fw-500: 500;
	--v3-fw-700: 700;
	--v3-fw-800: 800;
	--v3-fw-900: 900;

	/* ── Letter-spacing tokens do v3 (literais) ──────────────── */
	--v3-tracking-tighter: -0.025em;  /* tracking-tighter Tailwind */
	--v3-tracking-tight:   -0.015em;  /* tracking-tight */
	--v3-tracking-normal:   0;
	--v3-tracking-wide:     0.025em;
	--v3-tracking-widest:   0.1em;    /* tracking-widest Tailwind */
	/* Custom v3 trackings */
	--v3-tracking-018: 0.18em;        /* tracking-[0.18em] */
	--v3-tracking-02:  0.2em;         /* tracking-[0.2em] */
	--v3-tracking-022: 0.22em;        /* tracking-[0.22em] */
	--v3-tracking-035: -0.04em;       /* tracking customizado de h2 */

	/* ── Line-heights tokens ─────────────────────────────────── */
	--v3-lh-none:   1;
	--v3-lh-082:    0.82;
	--v3-lh-085:    0.85;
	--v3-lh-088:    0.88;
	--v3-lh-09:     0.9;
	--v3-lh-095:    0.95;
	--v3-lh-1:      1;
	--v3-lh-105:    1.05;
	--v3-lh-11:     1.1;
	--v3-lh-115:    1.15;
	--v3-lh-12:     1.2;
	--v3-lh-13:     1.3;
	--v3-lh-tight:  1.25;
	--v3-lh-snug:   1.375;
	--v3-lh-normal: 1.5;
	--v3-lh-relaxed:1.625;
	--v3-lh-loose:  2;

	/* ── Durations exatas do v3 ──────────────────────────────── */
	--v3-d-200:  200ms;
	--v3-d-300:  300ms;
	--v3-d-500:  500ms;
	--v3-d-700:  700ms;
	--v3-d-1000: 1000ms;

	/* ── Container max ────────────────────────────────────────── */
	--v3-container-max: 1400px;
	--v3-header-h: 6rem; /* h-24 = 6rem */

	/* ── Espaçamentos comuns do v3 ───────────────────────────── */
	--v3-pt-32: 8rem;   /* pt-32 = 128px */
	--v3-pt-20: 5rem;
	--v3-pb-20: 5rem;
	--v3-py-20: 5rem;
	--v3-py-16: 4rem;
	--v3-py-24: 6rem;
	--v3-py-28: 7rem;
	--v3-px-4:  1rem;
	--v3-px-6:  1.5rem;
	--v3-px-8:  2rem;
}

/* ============================================================
   UTILITÁRIOS BASE — classes que aparecem repetidamente no v3
   Prefixo .v3- pra não conflitar com CSS já existente.
   ============================================================ */

/* Container max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 */
.v3-container {
	max-width: var(--v3-container-max);
	margin-inline: auto;
	padding-inline: var(--v3-px-4);
	width: 100%;
}
@media (min-width: 640px)  { .v3-container { padding-inline: var(--v3-px-6); } }
@media (min-width: 1024px) { .v3-container { padding-inline: var(--v3-px-8); } }

/* Tipografia base (Inter) */
.v3-font-sans  { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; }
.v3-font-serif { font-family: 'Georgia', 'Times New Roman', Times, serif; }

/* Heading hero — text-[clamp(3.5rem,9vw,10rem)] font-[900] uppercase leading-[0.82] tracking-tighter */
.v3-h-hero {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: clamp(3.5rem, 9vw, 10rem);
	font-weight: 900;
	text-transform: uppercase;
	line-height: 0.82;
	letter-spacing: -0.025em;
	margin: 0;
}

/* Heading h1 padrão de pages — clamp(3rem,7vw,7.5rem) font-[900] uppercase tracking-tighter leading-[0.88] */
.v3-h-page {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: clamp(3rem, 7vw, 7.5rem);
	font-weight: 900;
	text-transform: uppercase;
	line-height: 0.88;
	letter-spacing: -0.025em;
	margin: 0;
}

/* Heading médio — text-4xl md:text-6xl font-[900] uppercase tracking-tighter leading-[0.9] */
.v3-h-md {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 2.25rem; /* text-4xl */
	font-weight: 900;
	text-transform: uppercase;
	line-height: 0.9;
	letter-spacing: -0.025em;
	margin: 0;
}
@media (min-width: 768px) { .v3-h-md { font-size: 3.75rem; } /* md:text-6xl */ }

/* Heading h2 — text-4xl md:text-5xl */
.v3-h-2 {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 2.25rem;
	font-weight: 900;
	text-transform: uppercase;
	line-height: 0.9;
	letter-spacing: -0.025em;
	margin: 0;
}
@media (min-width: 768px) { .v3-h-2 { font-size: 3rem; } }

/* Heading h3 institucional — text-2xl font-[900] uppercase tracking-tighter */
.v3-h-3 {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 1.5rem;
	font-weight: 900;
	text-transform: uppercase;
	line-height: 1.1;
	letter-spacing: -0.025em;
	margin: 0;
}

/* Kicker — text-xs font-bold uppercase tracking-[0.2em] text-white/50 */
.v3-kicker {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	margin: 0;
}

/* Kicker mais marcado — tracking-[0.22em] (mais espaçado) */
.v3-kicker-022 {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	margin: 0;
}

/* Small label — text-[10px] font-bold uppercase tracking-widest text-white */
.v3-tag {
	display: inline-block;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.625rem; /* 10px */
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	padding: 0.25rem 0.625rem;
	color: #fff;
}

/* Botão CTA com borda inferior — inline-flex items-center gap-3 text-sm font-bold uppercase tracking-widest border-b pb-1 */
.v3-cta-underline {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	border-bottom: 1px solid currentColor;
	padding-bottom: 0.25rem;
	color: inherit;
	transition: color 200ms ease;
}
.v3-cta-underline:hover { text-decoration: none; }

/* CTA com borda mais grossa (border-b-2) */
.v3-cta-underline--2 {
	border-bottom-width: 2px;
}

/* Botão preto */
.v3-btn-black {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: #000;
	color: #fff;
	padding: 1rem 2rem;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	transition: background 200ms ease;
}
.v3-btn-black:hover { background: rgba(0,0,0,0.7); color: #fff; text-decoration: none; }

/* Card-de-imagem grayscale → cor no hover (padrão repetido em CCBA/Bienal cards) */
.v3-img-gray {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(100%);
	transition: filter 700ms ease, transform 700ms ease;
}
.v3-img-gray-host:hover .v3-img-gray { filter: grayscale(0%); transform: scale(1.02); }

/* Variante hover-scale só (sem grayscale) */
.v3-img-scale-hover {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms ease;
}
.v3-img-scale-hover-host:hover .v3-img-scale-hover { transform: scale(1.05); }

/* Aspect ratios padrões do v3 */
.v3-aspect-4-3   { aspect-ratio: 4 / 3; }
.v3-aspect-16-9  { aspect-ratio: 16 / 9; }
.v3-aspect-16-10 { aspect-ratio: 16 / 10; }
.v3-aspect-21-9  { aspect-ratio: 21 / 9; }
.v3-aspect-3-4   { aspect-ratio: 3 / 4; }
.v3-aspect-square{ aspect-ratio: 1 / 1; }

/* Bordas (border border-black/10) */
.v3-border       { border: 1px solid var(--v3-black-10); }
.v3-border-b     { border-bottom: 1px solid var(--v3-black-10); }
.v3-border-t     { border-top: 1px solid var(--v3-black-10); }
.v3-border-l     { border-left: 1px solid var(--v3-black-10); }
.v3-border-r     { border-right: 1px solid var(--v3-black-10); }

/* Grid divider trick: bg-black/10 com gap-px → cria linhas divisórias entre células */
.v3-divider-grid {
	display: grid;
	gap: 1px;
	background: var(--v3-black-10);
}
.v3-divider-grid > * { background: #fff; }

/* Sticky top (sticky no scroll) */
.v3-sticky-top { position: sticky; top: 8rem; align-self: start; }

/* Reset utilitários — clearfix, sr-only */
.v3-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}