:root{
/* base — red (primary sampled from the logo file: rgb(237,50,55)) */
--deo-red:#ED3237;
--deo-red-deep:#E31E24; /* red used by the social-art tooling */
--deo-red-dark:#B3151B;
--deo-red-tint:rgba(237,50,55,.14);
--deo-red-veil:rgba(237,50,55,.06);

/* base — neutrals, dark-first */
--deo-black:#000000;
--deo-ink:#0A0A0A;
--deo-carbon:#111111;
--deo-slate:#1A1A1A;
--deo-line:#2A2A2A;
--deo-gray-600:#5C5C5C;
--deo-gray-500:#8A8A8A;
--deo-gray-400:#B3B3B3;
--deo-gray-200:#E6E6E6;
--deo-white:#FFFFFF;

/* base — belt ranks (used for rank tags, never as UI accent) */
--belt-white:#F2F2F2;
--belt-blue:#12439B;
--belt-purple:#5B2E91;
--belt-brown:#6B4326;
--belt-black:#0A0A0A;

/* semantic — surfaces */
--surface-page:var(--deo-black);
--surface-card:var(--deo-carbon);
--surface-raised:var(--deo-slate);
--surface-inverse:var(--deo-white);
--surface-accent:var(--deo-red);

/* semantic — text */
--text-primary:var(--deo-white);
--text-secondary:var(--deo-gray-400);
--text-muted:var(--deo-gray-500);
--text-accent:var(--deo-red);
--text-on-accent:var(--deo-white);
--text-on-inverse:var(--deo-ink);

/* semantic — interaction */
--accent:var(--deo-red);
--accent-hover:#F5474C;
--accent-press:var(--deo-red-deep);
--focus-ring:var(--deo-red);

/* semantic — lines */
--border-subtle:var(--deo-line);
--border-strong:var(--deo-gray-600);
--border-accent:var(--deo-red);
--rule-brand:var(--deo-red);

/* semantic — status (kept minimal; the brand runs on red + neutrals) */
--status-open:#3FBF63;
--status-closed:var(--deo-gray-600);
}