:root{
/* Brand core — sampled from production mark (sag-logo@2x.png) */
--cyan-50:#EDF7FC;--cyan-100:#D8EEF9;--cyan-200:#ADDCF2;--cyan-300:#81CAEA;--cyan-400:#54B4E0;--cyan-500:#3399C9;--cyan-600:#257CA6;--cyan-700:#1C6183;--cyan-800:#154961;--cyan-900:#0E3242;
--ink:#141414;/* near-black outlines, wire, arcs */
--gray-0:#FFFFFF;--gray-50:#F7F7F7;--gray-100:#F0F0F0;--gray-200:#E3E3E3;--gray-300:#CBCBCB;--gray-400:#A6A6A6;--gray-500:#777777;--gray-600:#595959;--gray-700:#3E3E3E;--gray-800:#282828;--gray-900:#141414;--gray-950:#000000;
/* Semantic hues — flat, chroma-matched to the cyan */
--green-400:#4DB582;--green-600:#2E7D57;--amber-400:#E3A93E;--amber-600:#9C6F1B;--red-400:#E15B4E;--red-600:#B03428;
/* Aliases */
--color-brand:var(--cyan-400);--color-brand-strong:var(--cyan-600);
--surface-page:var(--gray-0);--surface-sunken:var(--gray-50);--surface-card:var(--gray-0);--surface-ink:var(--gray-900);--surface-brand-tint:var(--cyan-50);
--text-body:var(--gray-900);--text-secondary:var(--gray-500);--text-faint:var(--gray-400);--text-inverse:#FFFFFF;--text-brand:var(--cyan-600);--text-on-brand:var(--ink);
--link:var(--cyan-600);--link-hover:var(--cyan-700);
--border-strong:var(--ink);--border-subtle:var(--gray-200);--border-input:var(--ink);
--success:var(--green-400);--success-text:var(--green-600);--warning:var(--amber-400);--warning-text:var(--amber-600);--danger:var(--red-400);--danger-text:var(--red-600);--info:var(--cyan-400);
--focus-ring:0 0 0 3px rgba(84,180,224,0.45);
}
/* Dark scope — cyan primary on charcoal, per icon concept */
.theme-dark{
--surface-page:var(--gray-900);--surface-sunken:#0D0D0D;--surface-card:#1E1E1E;--surface-brand-tint:rgba(84,180,224,0.12);
--text-body:#F2F2F2;--text-secondary:var(--gray-400);--text-faint:var(--gray-600);--text-brand:var(--cyan-400);
--link:var(--cyan-300);--link-hover:var(--cyan-200);
--border-strong:#F2F2F2;--border-subtle:#333333;--border-input:#F2F2F2;
}