:root{
/* Brand red — JOY palette. Accent #C74243, CTA #C01A1A. Everything below is a tint or shade of
   the six supplied colours; no other hues exist in this system. */
--red-50:#fdf5f5;--red-100:#f8eaea;--red-200:#f0d2d2;--red-300:#e3adae;--red-400:#d47a7b;--red-500:#c74243;--red-600:#c01a1a;--red-700:#a11616;--red-800:#7d1111;--red-900:#520b0b;
/* Neutrals — charcoal #454545 for text, lavender #F4F5FA for cards */
--ink-900:#2b2b2b;--ink-800:#3a3a3a;--ink-700:#454545;--ink-600:#5e5e5e;--ink-500:#787878;--ink-400:#a2a2a2;--ink-300:#cbcbcb;--ink-200:#e7e8ef;--ink-100:#f4f5fa;--ink-50:#fafbfe;--white:#ffffff;
/* Data tones — deep red, charcoal and a red-grey blend. Used for stat rules, chips and charts. */
--deep-100:#f9e2e2;--deep-300:#e08c8c;--deep-500:#c01a1a;--deep-600:#9d1414;
--char-100:#ededed;--char-300:#bdbdbd;--char-500:#454545;--char-600:#2f2f2f;
--soft-100:#f8eaea;--soft-300:#e5c4c4;--soft-500:#a56c6c;--soft-600:#8a5757;
--chart-alt:#454545;
/* Semantic surfaces */
--surface-desk:#eceef4;--surface-page:#ffffff;--surface-alt:#f4f5fa;--surface-tint:#fafbfe;--surface-card:#ffffff;--surface-brand:#c74243;--surface-brand-soft:#f8eaea;
/* Semantic text */
--text-heading:var(--ink-800);--text-body:var(--ink-500);--text-muted:var(--ink-400);--text-eyebrow:var(--ink-400);--text-brand:var(--red-500);--text-on-brand:#ffffff;--text-link:var(--red-600);--text-link-hover:var(--red-700);
/* Semantic lines & states */
--border-subtle:var(--ink-200);--border-strong:var(--ink-300);--border-brand:var(--red-200);
--action-primary:var(--red-600);--action-primary-hover:var(--red-700);--action-primary-press:var(--red-800);
--action-secondary-bg:#ffffff;--action-secondary-border:var(--ink-200);--action-secondary-hover-bg:var(--ink-50);
--focus-ring:color-mix(in oklab,var(--red-500) 45%,transparent);
--success:var(--red-600);--warn:var(--red-500);--highlight:var(--red-500);
/* Signature gradients — red and charcoal only */
--gradient-brand:linear-gradient(135deg,#c01a1a 0%,#c74243 55%,#d47a7b 100%); /* @kind color */
--gradient-well:linear-gradient(180deg,#ffffff 0%,#fdf5f5 55%,#f8eaea 100%); /* @kind color */
--gradient-media-scrim:linear-gradient(180deg,rgba(43,43,43,.06) 0%,rgba(43,43,43,.34) 42%,rgba(43,43,43,.74) 78%,rgba(43,43,43,.9) 100%); /* @kind color */
--gradient-mock-frame:linear-gradient(160deg,#c01a1a 0%,#c74243 45%,#e3adae 100%); /* @kind color */
}