:root{
/* Rampa rosa — cores de superfície, exceto pink-700 (cor-marca) */
--pink-100:#FAE1EC; /* fundo de bloco, área de respiro, hover suave */
--pink-300:#F2B5D0; /* fundo de card, badge secundário */
--pink-500:#E68AB2; /* elemento decorativo, gráfico */
--pink-700:#ED1E79; /* cor-marca: botão primário, eyebrow, indicador ativo */
/* Acento Bauhaus — só superfície/gráfico, nunca texto, máx. 1 bloco por dobra */
--accent-500:#F2B705; /* bloco geométrico, círculo de pontuação, régua destacada */
/* Rampa neutra — levemente quente (magenta residual); nunca cinza azulado */
--neutral-900:#000000; /* header, texto de máximo contraste */
--neutral-700:#4D4B4C; /* texto principal */
--neutral-500:#807D7E; /* texto secundário, linha de apoio */
--neutral-300:#B3AFB0; /* placeholder, borda, ícone inativo */
--neutral-200:#E6E1E3; /* divisor, fundo de card de produto */
--neutral-100:#F2F0F1; /* fundo de seção */
--white:#FFFFFF;
/* Semânticos */
--brand:var(--pink-700);
--brand-hover:#C4156A;
--accent:var(--accent-500);
--gradient-brand:linear-gradient(135deg,#ED1E79 0%,#ED1E79 40%,#E68AB2 65%,var(--gradient-end) 100%); /* @kind color */ /* gradiente-marca: rosa dominante; --gradient-end SEMPRE randômica — oklch(L≥0.75, C 0.15–0.2, hue 30–300): nunca cores escuras (marinho, preto), nunca hue do rosa */
--gradient-end:oklch(0.8 0.17 150); /* @kind color */ /* sobrescrever via JS a cada aplicação */
--surface-page:var(--white);
--surface-section:var(--neutral-100);
--surface-product:var(--neutral-200);
--surface-soft:var(--pink-100);
--surface-badge:var(--pink-300);
--text-max:var(--neutral-900);
--text-body:var(--neutral-700);
--text-secondary:var(--neutral-500);
--text-placeholder:var(--neutral-300);
--border:var(--neutral-300);
--divider:var(--neutral-200);
--icon:var(--neutral-700);
--icon-inactive:var(--neutral-300);
--icon-active:var(--pink-700);
--icon-disabled:rgba(77,75,76,.4);
}