/* Three brand colors, exactly as defined in the Figma Variable collection:
   Black #000000, Dojo Red #FF2C2C, White #FFFFFF.
   Greys below are the neutral surfaces measured off the branding boards. */
:root{
--dojo-black:#000000;--dojo-red:#FF2C2C;--dojo-white:#FFFFFF;
--dojo-red-soft:#FF6F6F;--dojo-red-tint:#FF8282;
--grey-100:#F5F5F5;--grey-200:#F2F2F2;--grey-300:#ECECEC;--grey-400:#E1E1E1;
--alpha-hairline:rgba(0,0,0,0.10);--alpha-rule:rgba(0,0,0,0.14);--alpha-mute:rgba(0,0,0,0.55);--alpha-press:rgba(0,0,0,0.06);

--text-strong:var(--dojo-black);--text-body:var(--dojo-black);--text-muted:var(--alpha-mute);
--text-accent:var(--dojo-red);--text-inverse:var(--dojo-white);
--surface-page:var(--dojo-white);--surface-board:var(--grey-400);--surface-card:var(--dojo-white);
--surface-sunken:var(--grey-200);--surface-inset:var(--grey-300);--surface-invert:var(--dojo-black);
--accent:var(--dojo-red);--accent-hover:#E62727;--accent-press:#CC2222;
--border-hairline:var(--alpha-hairline);--border-strong:var(--dojo-black);
--focus-ring:var(--dojo-red);
}