/* ═══════════════════════════════════════════════════════════════════
   TeeLegend - main.css
   Regra da casa: zero !important. Se for preciso, é sinal de que a
   especificidade está mal pensada - corrige-se a origem, não se força.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Design tokens ──────────────────────────────────────────────
   Paleta "CMY" (ciano do logo + magenta + amarelo = tintas da serigrafia).
   Layout claro (estilo Pampling): header branco com logo "LEGEND" Noite, rodapé Noite.
   Preview: _design-nova-loja/layout-claro-teelegend.html
   CTA principal = Noite sobre branco (19:1): o botão é o elemento mais contrastado do ecrã.
   Ciano = identidade (logo, links em fundo escuro, barra de portes). Magenta = SÓ descontos/urgência real.
   ATENÇÃO: ciano sobre branco = 2,2:1 -> nunca usar --tl-color-brand para texto em fundo claro.
   Para links/texto em fundo claro usar --tl-color-brand-text (5,4:1).
   ─────────────────────────────────────────────────────────────────── */
:root {
	--tl-color-noite:      #0b0d17;   /* header, rodapé, texto principal */
	--tl-color-noite-2:    #151a2b;   /* superfícies escuras secundárias */
	--tl-color-ink:        var(--tl-color-noite);
	--tl-color-ink-soft:   #5b6178;   /* texto secundário em fundo claro (6,1:1) */
	--tl-color-paper:      #ffffff;
	--tl-color-paper-alt:  #eef0f8;   /* "Névoa" - fundos suaves, fundo das fotos */
	--tl-color-line:       #e2e4ef;
	--tl-color-lavanda:    #cacee7;   /* do "LEGEND" - texto claro em fundo escuro */

	--tl-color-brand:      #00bbff;   /* ciano do logo - botões, destaques em fundo escuro */
	--tl-color-brand-ink:  var(--tl-color-noite); /* texto SOBRE ciano (8,8:1) */
	--tl-color-brand-text: #0070a8;   /* ciano para texto/links em fundo claro */
	--tl-color-accent:     #e0115f;   /* magenta - promoções, urgência, contador do carrinho */
	--tl-color-accent-ink: #ffffff;   /* texto sobre magenta (4,8:1) */
	--tl-color-highlight:  #ffd23f;   /* amarelo - "novidade", usar com moderação */
	--tl-color-success:    #1f7a3a;
	--tl-color-danger:     #c4123f;
	--tl-color-focus:      #00bbff;

	--tl-font-body:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--tl-font-display: var(--tl-font-body);

	--tl-text-xs:  0.75rem;
	--tl-text-sm:  0.875rem;
	--tl-text-md:  1rem;
	--tl-text-lg:  1.25rem;
	--tl-text-xl:  clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	--tl-text-2xl: clamp(2rem, 1.5rem + 2vw, 3rem);

	--tl-space-1: 0.25rem;
	--tl-space-2: 0.5rem;
	--tl-space-3: 0.75rem;
	--tl-space-4: 1rem;
	--tl-space-6: 1.5rem;
	--tl-space-8: 2rem;
	--tl-space-12: 3rem;
	--tl-space-16: 4rem;

	--tl-radius:     6px;
	--tl-container:  1440px;
	--tl-gutter:     clamp(1rem, 0.5rem + 2vw, 2.5rem);
	--tl-header-h:   64px;
	--tl-shadow:     0 6px 24px rgb(11 13 23 / 0.10);
	--tl-ease:       cubic-bezier(.2, .7, .2, 1);
}

/* ── 2. Reset mínimo ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--tl-font-body);
	font-size: var(--tl-text-md);
	line-height: 1.6;
	color: var(--tl-color-ink);
	background: var(--tl-color-paper);
	-webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-underline-offset: 0.15em; }
h1, h2, h3, h4 { font-family: var(--tl-font-display); line-height: 1.15; margin: 0 0 var(--tl-space-4); }
p { margin: 0 0 var(--tl-space-4); }
:focus-visible { outline: 2px solid var(--tl-color-focus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms; transition-duration: 0.01ms; scroll-behavior: auto; }
}

/* ── 3. Utilitários ────────────────────────────────────────────────── */
.tl-container { width: 100%; max-width: var(--tl-container); margin-inline: auto; padding-inline: var(--tl-gutter); }
.tl-visually-hidden {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tl-skip-link { position: absolute; left: var(--tl-space-4); top: -100px; z-index: 1000; padding: var(--tl-space-2) var(--tl-space-4); background: var(--tl-color-ink); color: var(--tl-color-paper); }
.tl-skip-link:focus { top: var(--tl-space-4); }
.tl-icon { width: 1.5rem; height: 1.5rem; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.tl-button {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--tl-space-2);
	min-height: 48px; padding: 0 var(--tl-space-6);
	border: 0; border-radius: var(--tl-radius);
	background: var(--tl-color-noite); color: var(--tl-color-paper);
	font-weight: 800; text-decoration: none;
	transition: background-color .2s var(--tl-ease), color .2s var(--tl-ease);
}
.tl-button:hover { background: var(--tl-color-noite-2); }
/* Ciano: só em fundos escuros (ex.: bloco das lojas, rodapé) */
.tl-button--brand { background: var(--tl-color-brand); color: var(--tl-color-brand-ink); }
.tl-button--brand:hover { background: var(--tl-color-paper); }

/* ── 4. Header ─────────────────────────────────────────────────────── */
.tl-header { position: sticky; top: 0; z-index: 100; background: var(--tl-color-paper); color: var(--tl-color-ink); border-bottom: 1px solid var(--tl-color-line); }
.admin-bar .tl-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .tl-header { top: 0; } }

.tl-header__inner { display: flex; align-items: center; gap: var(--tl-space-6); min-height: var(--tl-header-h); }
.tl-header__brand { flex-shrink: 0; }
.tl-header__brand a { display: block; }
.tl-header__brand img { height: 26px; width: auto; }
@media (min-width: 992px) { .tl-header__brand img { height: 30px; } }
.tl-header__wordmark { font-size: var(--tl-text-lg); font-weight: 800; text-decoration: none; letter-spacing: -0.02em; }
.tl-header__actions { display: flex; align-items: center; gap: var(--tl-space-2); margin-left: auto; }
.tl-header__action { position: relative; display: grid; place-items: center; width: 44px; height: 44px; text-decoration: none; }
.tl-header__count {
	position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px;
	border-radius: 9px; background: var(--tl-color-accent); color: var(--tl-color-accent-ink);
	font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.tl-header__count:empty, .tl-header__count[data-count="0"] { display: none; }
.tl-header__toggle { display: none; background: none; border: 0; color: inherit; padding: 0; width: 44px; height: 44px; place-items: center; }

/* Navegação desktop */
.tl-nav__list { display: flex; gap: var(--tl-space-6); margin: 0; padding: 0; list-style: none; }
.tl-nav__list a { display: block; padding: var(--tl-space-4) 0; font-weight: 600; font-size: var(--tl-text-sm); text-decoration: none; text-transform: uppercase; letter-spacing: 0.04em; }
.tl-nav__list a:hover, .tl-nav__list .current-menu-item > a { color: var(--tl-color-brand-text); } /* ciano escuro: 5,4:1 em branco */
.tl-nav .sub-menu { display: none; } /* mega menu entra na Fase 3 */

/* Navegação mobile */
@media (max-width: 991px) {
	.tl-header__toggle { display: grid; }
	.tl-nav {
		position: fixed; inset: var(--tl-header-h) 0 0 0; z-index: 99;
		padding: var(--tl-space-6) var(--tl-gutter);
		background: var(--tl-color-paper); overflow-y: auto;
		transform: translateX(-100%); visibility: hidden;
		transition: transform .3s var(--tl-ease), visibility 0s linear .3s;
	}
	.tl-nav.is-open { transform: none; visibility: visible; transition: transform .3s var(--tl-ease); }
	.tl-nav__list { flex-direction: column; gap: 0; }
	.tl-nav__list a { padding: var(--tl-space-4) 0; border-bottom: 1px solid var(--tl-color-line); font-size: var(--tl-text-md); }
	body.tl-nav-open { overflow: hidden; }
}

/* ── 5. Conteúdo ───────────────────────────────────────────────────── */
.tl-main { padding-block: var(--tl-space-8) var(--tl-space-16); min-height: 60vh; }
.tl-page-header { margin-bottom: var(--tl-space-8); }
.tl-page-title { font-size: var(--tl-text-2xl); font-weight: 800; letter-spacing: -0.02em; }
.tl-prose { max-width: 75ch; }
.tl-prose a { color: var(--tl-color-brand-text); }
.tl-post-list { display: grid; gap: var(--tl-space-8); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.tl-card__media img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--tl-radius); margin-bottom: var(--tl-space-3); }
.tl-card__title { font-size: var(--tl-text-lg); }
.tl-card__title a { text-decoration: none; }
.tl-card__meta { font-size: var(--tl-text-sm); color: var(--tl-color-ink-soft); }

.tl-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--tl-space-2); margin-bottom: var(--tl-space-6); font-size: var(--tl-text-sm); color: var(--tl-color-ink-soft); }
.tl-breadcrumb a { text-decoration: none; }
.tl-breadcrumb a:hover { color: var(--tl-color-ink); }

.tl-search-form { display: flex; max-width: 520px; border: 1px solid var(--tl-color-line); border-radius: var(--tl-radius); overflow: hidden; }
.tl-search-form__input { flex: 1; min-width: 0; min-height: 48px; padding: 0 var(--tl-space-4); border: 0; background: transparent; }
.tl-search-form__submit { display: grid; place-items: center; width: 48px; border: 0; background: var(--tl-color-ink); color: var(--tl-color-paper); }

.tl-404 { text-align: center; display: grid; justify-items: center; gap: var(--tl-space-4); padding-block: var(--tl-space-16); }
.tl-404__code { font-size: clamp(4rem, 10vw, 8rem); font-weight: 900; line-height: 1; color: var(--tl-color-brand-text); margin: 0; }

/* ── 6. Footer ─────────────────────────────────────────────────────── */
.tl-footer { background: var(--tl-color-noite); color: var(--tl-color-lavanda); padding-top: var(--tl-space-12); }
.tl-footer a { text-decoration: none; opacity: .85; }
.tl-footer a:hover { opacity: 1; }
.tl-footer__inner { display: grid; gap: var(--tl-space-8); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding-bottom: var(--tl-space-12); }
.tl-footer__logo { height: 24px; width: auto; margin-bottom: var(--tl-space-4); }
.tl-footer__tagline { opacity: .7; }
.tl-footer__list, .tl-footer__legal-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--tl-space-2); }
.tl-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--tl-space-4); padding-block: var(--tl-space-6); border-top: 1px solid var(--tl-color-noite-2); font-size: var(--tl-text-sm); opacity: .8; }
.tl-footer__legal p { margin: 0; }
.tl-footer__legal-list { grid-auto-flow: column; gap: var(--tl-space-6); }