:root{
/* ---- Base palette (brand book §8.3 — exact values, do not drift) ---- */
--pink-500:#E60468;   /* Rosa EJOY — cor-mãe */
--yellow-500:#FBB003; /* Amarelo EJOY — cor de destaque */
--graphite-700:#4E5052;/* Grafite — texto e versão institucional */
--white:#FFFFFF;

/* Rosa ramp — interaction states + wash tints. Derived from #E60468 only;
   the palette does not grow, it deepens. */
--pink-50:#FFF1F6;
--pink-100:#FFDDEB;
--pink-200:#FFB2CF;
--pink-300:#FF74A8;
--pink-400:#F52B81;
--pink-600:#C50058;
--pink-700:#A00047;
--pink-800:#750034;

/* Amarelo ramp — offer + price surfaces */
--yellow-50:#FFF8E4;
--yellow-100:#FEEDBB;
--yellow-200:#FDDC81;
--yellow-300:#FCC846;
--yellow-600:#E09C00;
--yellow-700:#B57E00;

/* Grafite ramp — interface neutrals, cool-warm neutral matched to #4E5052 */
--graphite-900:#2A2C2D;
--graphite-800:#3B3D3E;
--graphite-600:#616364;
--graphite-500:#7C7E7F;
--graphite-400:#A2A4A5;
--graphite-300:#C4C6C6;
--graphite-200:#DEDFDF;
--graphite-100:#EDEEEE;
--graphite-50:#F6F7F7;

/* Creme — the warm neutral of the brand's own product photography.
   Used as the editorial / lifestyle surface so layout and photo share a ground. */
--cream-50:#FBF8F5;
--cream-100:#F3EEE9;
--cream-200:#E7DFD7;

/* Semantic UI tones — the "tons de apoio para UI" the brand book leaves open
   (§8.3 pendency). Chosen to sit beside rosa without competing with it. */
--success-50:#E8F6EF;
--success-500:#17864F;
--success-700:#0E6339;
--danger-50:#FCEDEB;
--danger-500:#B3241C;
--danger-700:#8C1B15;
--warning-50:#FFF8E4;
--warning-500:#E09C00;
--warning-700:#B57E00;

/* ---- Semantic aliases — build with these, not with the ramps ---- */
--brand-primary:var(--pink-500);
--brand-accent:var(--yellow-500);
--brand-ink:var(--graphite-700);

--text-strong:var(--graphite-900);
--text-body:var(--graphite-700);
--text-muted:var(--graphite-500);
--text-faint:var(--graphite-400);
--text-inverse:var(--white);
--text-brand:var(--pink-500);
--text-price:var(--graphite-900);
--text-price-was:var(--graphite-400);
--text-link:var(--pink-600);
--text-link-hover:var(--pink-700);

--surface-page:var(--white);
--surface-card:var(--white);
--surface-subtle:var(--graphite-50);
--surface-sunken:var(--graphite-100);
--surface-editorial:var(--cream-100);
--surface-brand:var(--pink-500);
--surface-brand-wash:var(--pink-50);
--surface-accent:var(--yellow-500);
--surface-accent-wash:var(--yellow-50);
--surface-inverse:var(--graphite-900);
--surface-overlay:rgba(42,44,45,.55);

--border-subtle:var(--graphite-100);
--border-default:var(--graphite-200);
--border-strong:var(--graphite-300);
--border-brand:var(--pink-500);
--border-inverse:rgba(255,255,255,.28);

--action-primary-bg:var(--pink-500);
--action-primary-bg-hover:var(--pink-600);
--action-primary-bg-active:var(--pink-700);
--action-primary-fg:var(--white);
--action-secondary-bg:var(--white);
--action-secondary-bg-hover:var(--pink-50);
--action-secondary-fg:var(--pink-600);
--action-secondary-border:var(--pink-500);
--action-ghost-fg:var(--graphite-700);
--action-ghost-bg-hover:var(--graphite-50);
--action-accent-bg:var(--yellow-500);
--action-accent-bg-hover:var(--yellow-600);
--action-accent-fg:var(--graphite-900);
--action-disabled-bg:var(--graphite-100);
--action-disabled-fg:var(--graphite-400);

--focus-ring-color:rgba(230,4,104,.32);
}