:root{
--color-teal-500:#41808e;
--color-teal-600:#33646f;
--color-teal-700:#294f58;
--color-yellow-400:#f8c644;
--color-yellow-500:#f0b625;
--color-sage-400:#a0c0af;
--color-sage-300:#c1d8cb;
--color-lilac-400:#d7c6d7;
--color-lilac-300:#e8dce8;
--color-coral-400:#e88470;
--color-coral-500:#e06a51;
--color-charcoal-900:#424242;
--color-charcoal-700:#5c5c5c;
--color-beige-50:#fffcf3;
--color-white:#ffffff;
--color-black:#1c1c1c;

--color-primary:var(--color-teal-500);
--color-primary-hover:var(--color-teal-600);
--color-primary-active:var(--color-teal-700);
--color-accent-warm:var(--color-yellow-400);
--color-accent-warm-2:var(--color-coral-400);
--color-accent-cool:var(--color-sage-400);
--color-accent-cool-2:var(--color-lilac-400);

--surface-page:var(--color-beige-50);
--surface-card:var(--color-white);
--surface-inverse:var(--color-charcoal-900);
--surface-sunken:#f6f1e4;

--text-heading:var(--color-teal-700);
--text-body:var(--color-charcoal-900);
--text-muted:#7a7a72;
--text-on-inverse:var(--color-beige-50);
--text-on-primary:var(--color-white);

--border-subtle:#e4ddc9;
--border-strong:var(--color-teal-500);

--focus-ring:var(--color-coral-400);
}