:root{
/* ---- Brand ramp. Anchors sampled from the supplied logo (#45017b) and the
   live site footer (#673bb7) / section tint (#f7f4ff). ---- */
--purple-950:#2c0050;--purple-900:#370163;--purple-800:#45017b;--purple-700:#561988;
--purple-600:#673bb7;--purple-500:#7c56c4;--purple-400:#9a7fd3;--purple-300:#bda9e3;
--purple-200:#dccff1;--purple-100:#ede6f9;--purple-50:#f7f4ff;

/* ---- Neutrals. Editorial black-on-white, warm-free (true grey). ---- */
--ink-1000:#000000;--ink-900:#141414;--ink-800:#242424;--ink-700:#3d3d3d;
--ink-600:#5c5c5c;--ink-500:#7a7a7a;--ink-400:#a3a3a3;--ink-300:#cfcfcf;
--ink-200:#e5e5e5;--ink-100:#f1f1f1;--ink-50:#f8f8f8;--white:#ffffff;

/* ---- Semantic status. Purple-adjacent so alerts never fight the brand. ---- */
--green-600:#1f7a4d;--green-100:#e2f4ea;
--amber-600:#a86a05;--amber-100:#fdf1da;
--red-600:#b3261e;--red-100:#fdeceb;
--blue-600:#1f5fa8;--blue-100:#e6effa;

/* ---- Semantic aliases: use THESE in components, not the ramp. ---- */
--brand:var(--purple-800);
--brand-strong:var(--purple-900);
--brand-ui:var(--purple-600);
--brand-ui-hover:var(--purple-700);
--brand-on-dark:var(--purple-300);

--text-body:var(--ink-800);
--text-heading:var(--ink-1000);
--text-muted:var(--ink-500);
--text-meta:var(--ink-600);
--text-inverse:var(--white);
--text-brand:var(--brand);
--text-link:var(--brand-ui);
--text-link-hover:var(--purple-900);
--text-disabled:var(--ink-400);
--text-price:var(--ink-500);

--surface-page:var(--white);
--surface-tint:var(--purple-50);
--surface-card:var(--white);
--surface-raised:var(--white);
--surface-brand:var(--brand);
--surface-brand-ui:var(--brand-ui);
--surface-subtle:var(--ink-50);
--surface-overlay:rgba(20,20,20,.55);

--border-hairline:var(--ink-200);
--border-strong:var(--ink-300);
--border-rule:var(--ink-200);
--border-brand:var(--brand);
--border-on-brand:rgba(255,255,255,.38);
--border-focus:var(--purple-600);

--icon-default:var(--ink-800);
--icon-muted:var(--ink-500);
--icon-brand:var(--brand);
--icon-inverse:var(--white);

--status-success-fg:var(--green-600);--status-success-bg:var(--green-100);
--status-warning-fg:var(--amber-600);--status-warning-bg:var(--amber-100);
--status-danger-fg:var(--red-600);--status-danger-bg:var(--red-100);
--status-info-fg:var(--blue-600);--status-info-bg:var(--blue-100);
}