:root{
--color-slate-indigo:#2A3F5F;
--color-pulse-coral:#E8746C;
--color-clinic-sage:#6F8F7E;
--color-warm-bone:#F5F0E8;
--color-cool-mist:#D5DDE3;
--color-deep-ink:#14181E;
--color-white:#FFFFFF;

--surface-page:var(--color-warm-bone);
--surface-card:var(--color-white);
--surface-inverse:var(--color-slate-indigo);
--surface-sunken:var(--color-cool-mist);

--text-primary:var(--color-deep-ink);
--text-secondary:color-mix(in oklch, var(--color-deep-ink) 68%, transparent);
--text-on-inverse:var(--color-warm-bone);
--text-brand:var(--color-slate-indigo);
--text-link:var(--color-slate-indigo);
--text-link-hover:color-mix(in oklch, var(--color-slate-indigo) 85%, black);

--border-default:var(--color-cool-mist);
--border-strong:color-mix(in oklch, var(--color-slate-indigo) 40%, var(--color-cool-mist));

--accent-primary:var(--color-pulse-coral);
--accent-primary-hover:color-mix(in oklch, var(--color-pulse-coral) 88%, black);
--accent-primary-active:color-mix(in oklch, var(--color-pulse-coral) 78%, black);

--state-success:var(--color-clinic-sage);
--state-success-bg:color-mix(in oklch, var(--color-clinic-sage) 14%, white);
--state-disabled-bg:var(--color-cool-mist);
--state-disabled-text:color-mix(in oklch, var(--color-deep-ink) 40%, var(--color-cool-mist));
--focus-ring:color-mix(in oklch, var(--color-slate-indigo) 45%, transparent);
}