/**
 * Design Tokens — Brechó das Etiquetas
 *
 * Cores amostradas dos pixels da logo oficial da marca.
 *
 * REGRA (herdada do Recrie Theme):
 * nenhum CSS do tema usa cor, tamanho ou fonte hardcoded.
 * Tudo referencia as variáveis declaradas aqui.
 */

:root {

	/* ============================================================
	 * CORES — IDENTIDADE OFICIAL DA MARCA
	 * Amostradas da logo: rosa #F6C8CA, coral #FF93A0, amarelo #FFDE59.
	 * ============================================================ */

	/* Backgrounds */
	--color-bg:            #FFFFFF;   /* Fundo padrão — branco deixa a peça falar */
	--color-bg-alt:        #FDEEEE;   /* Rosa lavado: seções alternadas, cards */
	--color-bg-marca:      #F6C8CA;   /* Rosa da marca: faixas e blocos de identidade */
	--color-bg-muted:      #F4F1F1;
	--color-surface:       #FFFFFF;

	/* Texto */
	--color-text:          #4A4446;   /* Texto corrido */
	--color-text-strong:   #111111;   /* Títulos e preço */
	--color-text-muted:    #8A8285;   /* Secundário, metadados */
	--color-text-inverse:  #FFFFFF;

	/* Acento primário — CORAL da marca */
	--color-accent:        #FF93A0;
	--color-accent-hover:  #E56E7D;
	--color-accent-light:  #FFC2C9;
	/*
	 * ACESSIBILIDADE: o coral NÃO passa em contraste com texto branco
	 * (aprox. 2.2:1). Texto sobre coral é sempre PRETO.
	 */
	--color-accent-text:   #111111;

	/* Acento secundário — AMARELO. É a cor do BAZAR. */
	--color-bazar:         #FFDE59;
	--color-bazar-hover:   #E5C43F;
	--color-bazar-light:   #FFF4CC;
	/* Mesmo caso do coral: texto preto sobre amarelo. */
	--color-bazar-text:    #111111;

	/* Bordas e divisores */
	--color-border:        #E8E0E1;
	--color-border-strong: #111111;   /* Traço da marca — a linha tracejada da logo */
	--color-divider:       #F0EAEA;
	--color-overlay:       rgba(17, 17, 17, 0.45);

	/* Feedback */
	--color-success:       #3F9E5B;
	--color-warning:       #E5A200;
	--color-error:         #C81E2B;
	--color-info:          #0A7BBF;

	/* Estados da peça — usados no ERP e nos selos da vitrine */
	--color-estado-publicada: #3F9E5B;
	--color-estado-reservada: #E5A200;
	--color-estado-vendida:   #8A8285;
	--color-estado-leilao:    #7B2FF7;

	/* WhatsApp */
	--color-whatsapp:       #25D366;
	--color-whatsapp-hover: #1FB855;

	/* ============================================================
	 * TIPOGRAFIA
	 * A logo é manuscrita. Display SÓ em títulos curtos de marca —
	 * nunca em nome de produto, preço ou texto corrido.
	 * ============================================================ */
	--font-display: 'Parisienne', 'Brush Script MT', cursive;
	--font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--text-xs:   0.75rem;
	--text-sm:   0.875rem;
	--text-base: 1rem;
	--text-lg:   1.125rem;
	--text-xl:   1.25rem;
	--text-2xl:  1.5rem;
	--text-3xl:  1.875rem;
	--text-4xl:  2.25rem;

	--leading-tight:  1.2;
	--leading-normal: 1.5;

	/* ============================================================
	 * ESPAÇAMENTO E FORMA
	 * ============================================================ */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-12: 3rem;
	--space-16: 4rem;

	--radius-sm:   4px;
	--radius:      8px;
	--radius-lg:   16px;
	--radius-full: 9999px;

	--shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.06);
	--shadow:    0 2px 8px rgba(17, 17, 17, 0.08);
	--shadow-lg: 0 8px 24px rgba(17, 17, 17, 0.12);

	--container: 1140px;
	--container-wide: 1280px;

	/* ============================================================
	 * MÍDIA — proporções fixas obrigatórias.
	 * Todo container de imagem e vídeo declara proporção.
	 * É isso que garante CLS zero com catálogo pesado de mídia.
	 * ============================================================ */
	--ratio-peca:  3 / 4;    /* Foto do produto na listagem */
	--ratio-video: 9 / 16;   /* Vídeo vertical, mesmo do story */

	--transition: 160ms ease;
}