:root{
/* ---- Brand primitives (sampled from the official logo files) ---- */
--sa-cyan-500:#009FD6; /* logo mark, primary action */
--sa-navy-900:#1D2E52; /* wordmark, headings, dark surface */

/* ---- Cyan ramp ---- */
--sa-cyan-50:#EAF7FC;
--sa-cyan-100:#D0EDF8;
--sa-cyan-200:#A3DCF1;
--sa-cyan-300:#6BC7E8;
--sa-cyan-400:#2FB0DE;
--sa-cyan-600:#0089B8;
--sa-cyan-700:#00719A;
--sa-cyan-800:#005B7C;

/* ---- Navy ramp ---- */
--sa-navy-50:#F1F3F7;
--sa-navy-100:#E2E6EE;
--sa-navy-200:#C4CBDA;
--sa-navy-300:#9AA5BC;
--sa-navy-400:#6E7C9A;
--sa-navy-500:#4C5C7F;
--sa-navy-700:#2C4069;
--sa-navy-800:#24365B;

/* ---- Neutrals ---- */
--sa-white:#FFFFFF;
--sa-grey-50:#F7F8FA;
--sa-grey-100:#EFF1F4;
--sa-grey-200:#E1E4E9;
--sa-grey-300:#C9CDD5;
--sa-grey-500:#8A909C;
--sa-grey-700:#5A6068;
--sa-black:#111418;

/* ---- Semantic accents (derived in-hue; not sampled from source) ---- */
--sa-green-500:#2E9E63;
--sa-green-50:#E9F6EF;
--sa-amber-500:#E2A32B;
--sa-amber-50:#FDF4E4;
--sa-red-500:#C8372D;
--sa-red-50:#FBECEA;
--sa-sale-500:#E2001A; /* webshop discount / actie price */

/* ---- Semantic aliases ---- */
--sa-text-heading:var(--sa-navy-900);
--sa-text-body:var(--sa-navy-800);
--sa-text-muted:var(--sa-navy-400);
--sa-text-on-brand:var(--sa-white);
--sa-text-link:var(--sa-cyan-700);
--sa-text-link-hover:var(--sa-cyan-800);

--sa-surface-page:var(--sa-white);
--sa-surface-subtle:var(--sa-navy-50);
--sa-surface-card:var(--sa-white);
--sa-surface-brand:var(--sa-cyan-500);
--sa-surface-brand-subtle:var(--sa-cyan-50);
--sa-surface-inverse:var(--sa-navy-900);

--sa-border-subtle:var(--sa-navy-100);
--sa-border-default:var(--sa-navy-200);
--sa-border-strong:var(--sa-navy-300);
--sa-border-brand:var(--sa-cyan-500);

--sa-action-primary:var(--sa-cyan-500);
--sa-action-primary-hover:var(--sa-cyan-600);
--sa-action-primary-active:var(--sa-cyan-700);
--sa-action-secondary:var(--sa-navy-900);
--sa-action-secondary-hover:var(--sa-navy-800);
--sa-focus-ring:var(--sa-cyan-400);
}