:root{
/* Base palette — black, red, white, grey ONLY (client-mandated) */
--jcs-red:#FE0202; /* sampled from JCS-logo.jpg */
--jcs-red-hot:#FF3B30; /* hover / lighten on dark */
--jcs-red-deep:#C40000; /* press / darken */
--jcs-red-tint:rgba(254,2,2,.10); /* selected fills on dark */
--black-950:#08090A;
--black-900:#0C0D0F; /* page */
--black-850:#121316;
--black-800:#17181C; /* card */
--black-700:#1F2126;
--black-600:#2A2D34;
--grey-500:#4A4E58;
--grey-400:#6B7078;
--grey-300:#9CA1AB;
--grey-200:#C7CBD2;
--grey-100:#E8EAED;
--white:#FFFFFF;
--off-white:#F4F5F7;
/* Semantic — dark theme is the default and only theme */
--surface-page:var(--black-900);
--surface-raised:var(--black-850);
--surface-card:var(--black-800);
--surface-overlay:var(--black-700);
--surface-inverse:var(--off-white); /* rare light sections / print */
--text-heading:var(--white);
--text-body:var(--grey-200);
--text-muted:var(--grey-300);
--text-subtle:var(--grey-400);
--text-on-red:var(--white);
--text-inverse:var(--black-900);
--accent:var(--jcs-red);
--accent-hover:var(--jcs-red-hot);
--accent-press:var(--jcs-red-deep);
--border-default:#26282E;
--border-strong:#34373F;
--border-accent:var(--jcs-red);
/* Status (used sparingly; danger IS the brand red) */
--status-success:#3FB950;
--status-warning:#F0A020;
--status-danger:var(--jcs-red);
}