:root{
/* ---- base ramps ---- */
/* Teal — primary brand ramp */
--teal-50:#eef7f5;--teal-100:#d8ece7;--teal-200:#b2d9d1;--teal-300:#7fbfb3;--teal-400:#4d9f92;
--teal-500:#2f8175;--teal-600:#23685f;--teal-700:#1c534d;--teal-800:#17403c;--teal-900:#11302d;
/* Slate blue — secondary / informational ramp */
--blue-50:#f0f3fa;--blue-100:#dfe5f4;--blue-200:#c1cbe9;--blue-300:#9aaad8;--blue-400:#7488c4;
--blue-500:#566bab;--blue-600:#45568c;--blue-700:#374470;--blue-800:#2c3757;--blue-900:#212842;
/* Neutrals — very slightly cool-green cast so they sit under the teal */
--n-0:#ffffff;--n-25:#fbfcfc;--n-50:#f6f8f8;--n-100:#eef1f1;--n-200:#e2e7e7;--n-300:#cdd4d4;
--n-400:#a6b0b0;--n-500:#7c8787;--n-600:#5c6666;--n-700:#414a4a;--n-800:#2a3131;--n-900:#171c1c;
/* Support hues — used only for status and category coding */
--green-100:#dcefe3;--green-500:#2e7d5b;--green-700:#1f5b41;
--amber-100:#f8ecd6;--amber-500:#c98a2b;--amber-700:#8f5f16;
--clay-100:#f7e2dd;--clay-500:#c1543f;--clay-700:#8c3728;
--lilac-100:#e9e6f6;--lilac-500:#6f63b0;

/* ---- semantic: text ---- */
--text-strong:var(--n-900);--text-body:var(--n-800);--text-muted:var(--n-600);
--text-subtle:var(--n-500);--text-disabled:var(--n-400);
--text-inverse:var(--n-0);--text-brand:var(--teal-600);--text-link:var(--teal-600);
--text-link-hover:var(--teal-700);--text-on-brand:#ffffff;

/* ---- semantic: surfaces ---- */
--surface-page:#f4f7f6;
--surface-page-tint:radial-gradient(120% 90% at 12% 0%,#eaf4f1 0%,#f4f7f6 46%,#f2f5f9 100%);
--surface-card:rgba(255,255,255,.66);
--surface-card-solid:var(--n-0);
--surface-raised:rgba(255,255,255,.82);
--surface-sunken:var(--n-50);
--surface-inset:rgba(23,28,28,.04);
--surface-brand:var(--teal-500);
--surface-brand-soft:var(--teal-50);
--surface-brand-deep:var(--teal-800);
--surface-accent-soft:var(--blue-50);
--surface-overlay:rgba(23,28,28,.42);

/* ---- semantic: borders ---- */
--border-hairline:rgba(23,28,28,.07);
--border-subtle:var(--n-200);
--border-default:var(--n-300);
--border-strong:var(--n-400);
--border-glass:rgba(255,255,255,.72);
--border-brand:var(--teal-400);
--focus-ring:rgba(47,129,117,.38);

/* ---- semantic: status ---- */
--status-success-fg:var(--green-700);--status-success-bg:var(--green-100);--status-success-solid:var(--green-500);
--status-warning-fg:var(--amber-700);--status-warning-bg:var(--amber-100);--status-warning-solid:var(--amber-500);
--status-danger-fg:var(--clay-700);--status-danger-bg:var(--clay-100);--status-danger-solid:var(--clay-500);
--status-info-fg:var(--blue-700);--status-info-bg:var(--blue-100);--status-info-solid:var(--blue-500);

/* ---- category coding for event types ---- */
--cat-music:var(--lilac-500);--cat-food:var(--amber-500);--cat-talks:var(--blue-500);
--cat-outdoors:var(--green-500);--cat-community:var(--clay-500);
}