:root{
/* ---- Base neutrals ---- */
--zavo-black:#000000;
--zavo-near-black:#0A0A0C;
--zavo-dark-2:#1E1E1E;
--zavo-dark-gray:#2B2B2B;
--zavo-mid-gray-1:#5E5E5E;
--zavo-mid-gray-2:#929292;
--zavo-white:#FFFFFF;
--zavo-soft-white:#EEF2EA;

/* ---- Primary (accent only — never a background, never body/long text) ---- */
--zavo-green:#7ED01C;
--zavo-green-light:#ABFF49;
--zavo-green-surface:color-mix(in oklch, var(--zavo-green) 12%, white);
--zavo-green-hover:color-mix(in oklch, var(--zavo-green) 82%, black);

/* ---- Secondary — icons, chart series, data variation only ---- */
--zavo-purple:#7C3AED;
--zavo-purple-surface:color-mix(in oklch, var(--zavo-purple) 12%, white);
--zavo-purple-tint-1:color-mix(in oklch, var(--zavo-purple) 70%, white);
--zavo-purple-tint-2:color-mix(in oklch, var(--zavo-purple) 40%, white);

/* ---- Tertiary — same restricted use as purple ---- */
--zavo-teal:#00CED1;
--zavo-teal-surface:color-mix(in oklch, var(--zavo-teal) 12%, white);
--zavo-teal-tint-1:color-mix(in oklch, var(--zavo-teal) 70%, white);
--zavo-teal-tint-2:color-mix(in oklch, var(--zavo-teal) 40%, white);

/* ---- Functional — status only, never body text/logos/backgrounds ---- */
--zavo-red:#E10030;
--zavo-red-surface:color-mix(in oklch, var(--zavo-red) 10%, white);
--zavo-red-tint:color-mix(in oklch, var(--zavo-red) 55%, white);
--zavo-amber:#F8C700;
--zavo-amber-surface:color-mix(in oklch, var(--zavo-amber) 14%, white);
--zavo-amber-tint:color-mix(in oklch, var(--zavo-amber) 55%, white);

/* ---- Semantic aliases ---- */
--text-primary:var(--zavo-black);
--text-secondary:var(--zavo-mid-gray-1);
--text-tertiary:var(--zavo-mid-gray-2);
--text-on-dark:var(--zavo-soft-white);
--text-on-dark-secondary:var(--zavo-mid-gray-2);
--text-accent:var(--zavo-green);

--surface-page:var(--zavo-white);
--surface-page-alt:var(--zavo-soft-white);
--surface-dark:var(--zavo-near-black);
--surface-dark-2:var(--zavo-dark-2);
--surface-card:var(--zavo-white);
--surface-card-dark:var(--zavo-dark-gray);
--surface-hover:color-mix(in oklch, var(--zavo-black) 4%, white);
--surface-hover-dark:color-mix(in oklch, var(--zavo-white) 8%, var(--zavo-near-black));

--border-default:color-mix(in oklch, var(--zavo-black) 12%, white);
--border-dark:color-mix(in oklch, var(--zavo-white) 16%, var(--zavo-near-black));

--status-error:var(--zavo-red);
--status-error-surface:var(--zavo-red-surface);
--status-caution:var(--zavo-amber);
--status-caution-surface:var(--zavo-amber-surface);

--focus-ring:var(--zavo-green);
--link-color:var(--zavo-green-hover);
--link-color-hover:var(--zavo-green);
}