/* ZagSystems color tokens. Base scales + semantic aliases. Light = default, dark via [data-theme="dark"]. */
:root{
/* Zag Red — brand anchor #D80B1A = red-600 */
--red-50:#FDF1F2;--red-100:#FADDE0;--red-200:#F4B6BB;--red-300:#EC858D;--red-400:#E2505B;--red-500:#DC2A37;--red-600:#D80B1A;--red-700:#B30815;--red-800:#8E0611;--red-900:#5E040B;
/* Neutral — built around brand grey #D9D9D9 (200) and off-white #F5F5F5 (50); faint cool tint toward ink */
--neutral-0:#FFFFFF;--neutral-25:#FAFAFA;--neutral-50:#F5F5F5;--neutral-100:#EDEDED;--neutral-150:#E4E4E4;--neutral-200:#D9D9D9;--neutral-300:#C2C4C5;--neutral-400:#9A9EA1;--neutral-500:#6B7074;--neutral-600:#575C61;--neutral-700:#3D4246;--neutral-800:#26292C;--neutral-850:#1C1F22;--neutral-900:#15181A;--neutral-950:#0E1012;
/* Systems Sage — the "SYSTEMS" wordmark grey #91A5A4; technical diagrams, secondary brand moments */
--sage-50:#F3F6F6;--sage-100:#E6ECEC;--sage-200:#CCD7D6;--sage-300:#B1C0BF;--sage-500:#91A5A4;--sage-600:#728786;--sage-700:#56696A;--sage-800:#3A4848;--sage-900:#222B2B;
/* Semantic scales — deliberately distinct in hue from Zag Red */
--green-50:#EEF7F1;--green-200:#B9DEC6;--green-400:#5CC48A;--green-600:#1A7A46;--green-700:#13603A;
--amber-50:#FFF6E6;--amber-200:#F8D79A;--amber-400:#F2B04E;--amber-600:#A35C00;--amber-700:#7F4700;
--brick-50:#FCF0EC;--brick-200:#F2C1B3;--brick-400:#F2836B;--brick-600:#BF3417;--brick-700:#982612;
--blue-50:#EEF3FD;--blue-200:#BCD0F6;--blue-400:#7FA6F2;--blue-600:#2457C5;--blue-700:#1B4398;

/* Brand */
--brand:var(--red-600);--brand-hover:var(--red-700);--brand-press:var(--red-800);--brand-subtle:var(--red-50);--brand-subtle-border:var(--red-200);--brand-text:var(--red-600);
--brand-sage:var(--sage-500);
/* Surfaces */
--bg-page:var(--neutral-0);--bg-subtle:var(--neutral-50);--bg-muted:var(--neutral-100);--bg-inverse:var(--neutral-950);
--surface-card:var(--neutral-0);--surface-raised:var(--neutral-0);--surface-sunken:var(--neutral-50);--surface-overlay:rgba(14,16,18,.48);
/* Borders */
--border-subtle:var(--neutral-150);--border-default:var(--neutral-200);--border-strong:var(--neutral-400);--border-inverse:var(--neutral-700);
/* Text */
--text-primary:var(--neutral-950);--text-secondary:var(--neutral-600);--text-tertiary:var(--neutral-500);--text-disabled:var(--neutral-400);--text-inverse:var(--neutral-0);--text-on-brand:#FFFFFF;
--text-link:var(--red-600);--text-link-hover:var(--red-700);
/* Actions */
--action-primary-bg:var(--brand);--action-primary-bg-hover:var(--brand-hover);--action-primary-bg-press:var(--brand-press);--action-primary-fg:var(--text-on-brand);
--action-neutral-bg:var(--neutral-950);--action-neutral-bg-hover:var(--neutral-800);--action-neutral-bg-press:var(--neutral-700);--action-neutral-fg:var(--neutral-0);
--action-secondary-bg:transparent;--action-secondary-bg-hover:var(--neutral-50);--action-secondary-bg-press:var(--neutral-100);--action-secondary-border:var(--neutral-300);--action-secondary-fg:var(--text-primary);
--action-ghost-bg-hover:var(--neutral-100);--action-ghost-bg-press:var(--neutral-150);
--action-disabled-bg:var(--neutral-100);--action-disabled-fg:var(--neutral-400);
/* Form controls */
--control-bg:var(--neutral-0);--control-border:var(--neutral-300);--control-border-hover:var(--neutral-500);--control-border-focus:var(--neutral-950);--control-checked:var(--neutral-950);--control-placeholder:var(--neutral-500);
/* Focus */
--focus-ring-color:var(--neutral-950);
/* Status */
--success-fg:var(--green-700);--success-bg:var(--green-50);--success-border:var(--green-200);--success-solid:var(--green-600);
--warning-fg:var(--amber-700);--warning-bg:var(--amber-50);--warning-border:var(--amber-200);--warning-solid:var(--amber-600);
--error-fg:var(--brick-700);--error-bg:var(--brick-50);--error-border:var(--brick-200);--error-solid:var(--brick-600);
--info-fg:var(--blue-700);--info-bg:var(--blue-50);--info-border:var(--blue-200);--info-solid:var(--blue-600);
/* Technical motif */
--blueprint-line:rgba(14,16,18,.06);--trace-color:var(--neutral-300);
color-scheme:light;
}
[data-theme="dark"]{
--brand:var(--red-600);--brand-hover:#E8212F;--brand-press:var(--red-700);--brand-subtle:rgba(216,11,26,.14);--brand-subtle-border:rgba(236,133,141,.35);--brand-text:#F0707A;
--bg-page:var(--neutral-950);--bg-subtle:var(--neutral-900);--bg-muted:var(--neutral-850);--bg-inverse:var(--neutral-50);
--surface-card:var(--neutral-900);--surface-raised:var(--neutral-850);--surface-sunken:#0A0B0D;--surface-overlay:rgba(0,0,0,.64);
--border-subtle:#22262A;--border-default:#2B2F33;--border-strong:#4A5055;--border-inverse:var(--neutral-200);
--text-primary:#F2F3F3;--text-secondary:#A8AEB2;--text-tertiary:#868C91;--text-disabled:#5A6065;--text-inverse:var(--neutral-950);
--text-link:#F0707A;--text-link-hover:#F59AA1;
--action-neutral-bg:#F2F3F3;--action-neutral-bg-hover:#FFFFFF;--action-neutral-bg-press:var(--neutral-200);--action-neutral-fg:var(--neutral-950);
--action-secondary-bg-hover:var(--neutral-850);--action-secondary-bg-press:#24282B;--action-secondary-border:#3D4246;--action-secondary-fg:#F2F3F3;
--action-ghost-bg-hover:var(--neutral-850);--action-ghost-bg-press:#24282B;
--action-disabled-bg:var(--neutral-850);--action-disabled-fg:#5A6065;
--control-bg:var(--neutral-900);--control-border:#3D4246;--control-border-hover:#6B7074;--control-border-focus:#F2F3F3;--control-checked:#F2F3F3;--control-placeholder:#868C91;
--focus-ring-color:#F2F3F3;
--success-fg:var(--green-400);--success-bg:rgba(26,122,70,.16);--success-border:rgba(92,196,138,.32);
--warning-fg:var(--amber-400);--warning-bg:rgba(163,92,0,.18);--warning-border:rgba(242,176,78,.32);
--error-fg:var(--brick-400);--error-bg:rgba(191,52,23,.18);--error-border:rgba(242,131,107,.32);
--info-fg:var(--blue-400);--info-bg:rgba(36,87,197,.18);--info-border:rgba(127,166,242,.32);
--blueprint-line:rgba(242,243,243,.05);--trace-color:#3D4246;
color-scheme:dark;
}