:root{
/* --- Base palette --------------------------------------------------- */
/* Celeste — the imagotipo blue. Sampled from "Logo general.jpg". */
--celeste-50:#eaf7fd;--celeste-100:#cbecfa;--celeste-200:#9addf5;--celeste-300:#5fc7ee;
--celeste-400:#31b0e6;--celeste-500:#189edb;--celeste-600:#0f83bb;--celeste-700:#0c6893;
--celeste-800:#0a4f70;--celeste-900:#083a53;
/* Navy — the info bars and badges on the social flyers. */
--navy-900:#071723;--navy-800:#0b2031;--navy-700:#122d42;--navy-600:#1c4059;--navy-500:#2c5876;
/* Oro norteño — the accent on scripts, phone numbers and CTAs. */
--oro-600:#c99a10;--oro-500:#f1c527;--oro-400:#f7d75e;--oro-300:#fbe79b;
/* Crema / arena — flyer wave strips and paper surfaces. */
--crema-50:#fdfaf5;--crema-100:#f7efe3;--crema-200:#eddfca;--crema-300:#d9c4a5;
/* Neutrals */
--white:#ffffff;--gray-100:#f2f4f6;--gray-200:#e2e7eb;--gray-300:#c6ced5;
--gray-400:#9aa6b0;--gray-500:#6d7b87;--gray-600:#4a5761;--black:#000000;
/* Semantic hues (kept in-family: sea greens and coral, never generic UI red/green) */
--verde-500:#2e9e6b;--verde-100:#dcf2e8;
--coral-500:#d7452f;--coral-100:#fbe3df;
--info-500:var(--celeste-500);--info-100:var(--celeste-100);

/* --- Semantic aliases ------------------------------------------------ */
--brand:var(--celeste-500);
--brand-strong:var(--celeste-600);
--brand-ink:var(--navy-800);
--accent:var(--oro-500);

--surface-page:var(--crema-50);
--surface-card:var(--white);
--surface-sunken:var(--crema-100);
--surface-inverse:var(--navy-800);
--surface-brand:var(--celeste-500);

--text-body:var(--navy-800);
--text-muted:var(--gray-500);
--text-inverse:var(--white);
--text-on-brand:var(--white);
--text-accent:var(--oro-500);

--border-subtle:var(--gray-200);
--border-strong:var(--navy-800);
--border-accent:var(--oro-500);

--focus-ring:var(--celeste-400);

--success:var(--verde-500);--success-bg:var(--verde-100);
--danger:var(--coral-500);--danger-bg:var(--coral-100);
--warning:var(--oro-500);--warning-bg:var(--oro-300);
}