:root{
/* ── Base neutrals — dark-first ramp (ink) ───────────────────────── */
--ink-0:#000000;
--ink-1:#0A0A0A;
--ink-2:#141414;
--ink-3:#1C1C1C;
--ink-4:#242424;
--ink-5:#2E2E2E;
--ink-6:#6E6E73;
--ink-7:#8E8E93;
--ink-8:#C7C7CC;
--ink-9:#F2F2F2;
--ink-10:#FFFFFF;

/* ── System accent — blue. One accent, used for state, never decoration ── */
--blue-100:#D6E4FF;
--blue-300:#7FA8F5;
--blue-500:#2F6FED;
--blue-600:#1F58CC;
--blue-700:#17408F;

/* ── Positive — green. Growth, liveness, upward movement ────────── */
--green-100:#C9F5D6;
--green-300:#5FE08A;
--green-500:#22C55E;
--green-600:#16A34A;
--green-700:#0F7434;

/* ── Identity ramps — cause & nonprofit avatars only ─────────────── */
--coral-100:#F7DCD2;
--coral-300:#F2A18A;
--coral-500:#F0603E;
--coral-700:#9C3A22;

--pink-100:#FBDDE6;
--pink-300:#F5A3BF;
--pink-500:#EC4E85;
--pink-700:#98284F;

--teal-100:#CFEFE6;
--teal-300:#7DD9C4;
--teal-500:#20B79B;
--teal-700:#0E6B5A;

--amber-100:#F6E4C0;
--amber-300:#EBC272;
--amber-500:#DE9B21;
--amber-700:#8C5C0C;

/* ── Alert ──────────────────────────────────────────────────────── */
--red-100:#FBD9D5;
--red-500:#E5443A;
--red-700:#93231C;

/* ── Semantic aliases — dark is the default theme ───────────────── */
--surface-page:var(--ink-1);
--surface-card:var(--ink-2);
--surface-tile:var(--ink-3);
--surface-inset:var(--ink-0);
--surface-hover:var(--ink-4);
--surface-scrim:rgba(0,0,0,.72);

--text-primary:var(--ink-10);
--text-secondary:var(--ink-8);
--text-muted:var(--ink-7);
--text-inverse:var(--ink-1);
--text-accent:var(--blue-500);
--text-positive:var(--green-500);

--border-hairline:var(--ink-5);
--border-strong:var(--ink-6);
--border-selected:var(--blue-500);

/* Contrast-inversion pair: whichever colour reads most solid on the current
   surface is the primary action colour. White-on-black here; flips in light. */
--fill-primary:var(--ink-10);
--on-primary:var(--ink-1);
--fill-secondary:var(--ink-3);
--on-secondary:var(--ink-10);

--focus-ring:var(--blue-500);
}

/* ── Light theme. Nothing is hand-recoloured; the aliases just flip. ── */
[data-theme="light"]{
--surface-page:#FFFFFF;
--surface-card:#FFFFFF;
--surface-tile:#F5F5F5;
--surface-inset:#EDEDED;
--surface-hover:#E8E8E8;
--surface-scrim:rgba(10,10,10,.5);

--text-primary:var(--ink-1);
--text-secondary:#3C3C41;
--text-muted:var(--ink-6);
--text-inverse:var(--ink-10);
--text-accent:var(--blue-600);
--text-positive:var(--green-600);

--border-hairline:#E2E2E4;
--border-strong:#C7C7CC;
--border-selected:var(--blue-500);

--fill-primary:var(--ink-1);
--on-primary:var(--ink-10);
--fill-secondary:#F0F0F0;
--on-secondary:var(--ink-1);
}