:root{
/* Core palette — warm editorial, taken from the HubSpot proposal deck */
--sync-ink:#14191F;          /* Tinta — near-black navy, dark grounds + body ink */
--sync-cream:#F7F4EF;        /* Crema — default page ground */
--sync-sand:#EDE7DC;         /* Arena — muted panels, notes */
--sync-linen:#E8E2D6;        /* Lino — tracks, dividers, inactive fills */
--sync-white:#FFFFFF;        /* Cards on cream */
/* Accent — brick family, the only chromatic family in the system */
--sync-brick:#C04929;        /* Ladrillo — primary accent */
--sync-brick-deep:#902F1F;   /* Ladrillo profundo — emphasis, deepest tier */
--sync-blush:#EDB9A4;        /* Rubor — light tier, tints, chart low values */
/* Neutrals */
--sync-slate:#6B7280;        /* Pizarra — secondary text, labels */
--sync-border:#E3DCCF;
/* Brick scale — 10/30/50 are tints over cream, 70/90 are the base + deep */
--sync-brick-10:#F1E3DB;
--sync-brick-30:#E6C1B4;
--sync-brick-50:#DC9E8C;
--sync-brick-70:#C04929;
--sync-brick-90:#902F1F;
/* Functional — dashboards/data contexts only, muted to sit on cream */
--sync-green:#2F6F4F;
--sync-red:#B3261E;
--sync-amber:#B7791F;
/* Semantic aliases */
--surface-page:var(--sync-cream);
--surface-card:var(--sync-white);
--surface-muted:var(--sync-sand);
--surface-inverse:var(--sync-ink);
--text-primary:var(--sync-ink);
--text-secondary:var(--sync-slate);
--text-inverse:var(--sync-cream);
--text-accent:var(--sync-brick-deep);
--text-link:var(--sync-brick-deep);
--border-default:var(--sync-border);
--action-primary:var(--sync-brick);
--action-primary-hover:var(--sync-brick-deep);
--focus-ring:var(--sync-brick);
/* Brand gradient — warm only, cover/hero use, never product UI */
--gradient-brand:linear-gradient(135deg,var(--sync-blush) 0%,var(--sync-brick) 45%,var(--sync-brick-deep) 72%,var(--sync-ink) 100%);
/* ---- Legacy aliases (previous cool identity) — mapped onto the warm palette
       so existing components and templates re-skin without edits. Do not use
       these names in new work. ---- */
--sync-periwinkle:var(--sync-blush);
--sync-indigo:var(--sync-brick);
--sync-violet:var(--sync-brick-deep);
--sync-deep:var(--sync-ink);
--sync-copper:var(--sync-brick);
--sync-copper-hover:var(--sync-brick-deep);
--sync-fog:var(--sync-cream);
--sync-gray-text:var(--sync-slate);
--sync-indigo-10:var(--sync-brick-10);
--sync-indigo-30:var(--sync-brick-30);
--sync-indigo-50:var(--sync-brick-50);
--sync-indigo-70:var(--sync-brick-70);
--sync-indigo-90:var(--sync-brick-90);
}
a{color:var(--text-link);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--sync-brick)}