/* Application stylesheet.
 *
 * Desktop-first, usable on smaller screens (SRS §22.2). Status and priority
 * always carry a text label — colour is never the only signal (SRS §22.3,
 * §22.16), which is why the status classes below set a border and a label
 * weight rather than a fill alone.
 *
 * Phase 1 defines the tokens and the global layout. Later phases add screen
 * styles; they must reuse these tokens rather than inventing colours.
 */

:root {
  --colour-text: #1c2530;
  --colour-text-muted: #55616f;
  --colour-bg: #f4f6f8;
  --colour-surface: #ffffff;
  --colour-border: #d3dae2;
  --colour-brand: #10456e;
  --colour-brand-dark: #0a2f4d;
  --colour-focus: #b8560f;
  --colour-ok: #1c6b3c;
  --colour-warn: #8a5a00;
  --colour-error: #a32020;

  /* PHASE-16. Two roles the palette already had and had never named.
     `--colour-brand` is a BACKGROUND -- white text sits on it.
     `--colour-brand-text` is the same blue used as TEXT on the page.

     In the light theme the two are identical, which is precisely why the
     distinction was invisible, and why dark mode needed it before anything
     else: no single colour can be both dark enough for white text to sit on
     AND light enough to read against a dark page. Splitting them changes
     nothing here and is what makes the dark block below possible. */
  --colour-brand-text: #10456e;
  --colour-brand-text-strong: #0a2f4d;

  /* Text ON a brand surface, and the two tinted message grounds. These are the
     eight literal colours that were left outside :root -- the header above
     asks later phases to reuse tokens rather than invent colours, and these
     were the places that had to invent one because no token existed. */
  --colour-on-brand: #ffffff;
  --colour-on-brand-muted: #eef3f8;
  --colour-on-brand-subtle: #cfe0ef;
  --colour-error-tint: #fbeaea;
  --colour-info-tint: #eaf1f7;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;

  --radius: 4px;
  --font-base: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  --measure: 68ch;
}

body {
  font-family: var(--font-base);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--colour-text);
  background: var(--colour-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* --- Focus: always visible. A focus state that is hard to see fails
       keyboard navigation through the ticket workflow (SRS §22.16). --- */
:focus-visible {
  outline: 3px solid var(--colour-focus);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--colour-surface);
  z-index: 10;
}

.skip-link:focus {
  inset-inline-start: var(--space-2);
  top: var(--space-2);
}

/* --- Top bar (plan §14.2) --- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--colour-brand-dark);
  color: var(--colour-on-brand);
}

.topbar__brand {
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--colour-on-brand);
  text-decoration: none;
}

.topbar__identity {
  font-size: 0.9375rem;
}

/* --- Primary navigation: role-filtered from Phase 3, never a control --- */
.nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: 0 var(--space-4);
  background: var(--colour-brand);
}

.nav a {
  padding: var(--space-2) var(--space-3);
  color: var(--colour-on-brand-muted);
  text-decoration: none;
}

.nav a[aria-current="page"] {
  background: var(--colour-bg);
  color: var(--colour-brand-text-strong);
  font-weight: 600;
}

/* --- Page --- */
.main {
  flex: 1;
  width: 100%;
  max-width: 78rem;
  margin: 0 auto;
  padding: var(--space-4);
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.page-header__title {
  font-size: 1.5rem;
  line-height: 1.25;
}

.card {
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  max-width: var(--measure);
}

.card p + .kv {
  margin-top: var(--space-3);
}

.kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-1) var(--space-3);
}

.kv dt {
  font-weight: 600;
  color: var(--colour-text-muted);
}

code {
  font-family: var(--font-mono);
  font-size: 0.9375em;
}

/* --- Message region --- */
.messages:not(:empty) {
  margin-bottom: var(--space-4);
}

.message {
  padding: var(--space-2) var(--space-3);
  border-inline-start: 4px solid var(--colour-border);
  border-radius: var(--radius);
  background: var(--colour-surface);
}

.message--success {
  border-inline-start-color: var(--colour-ok);
}

.message--warning {
  border-inline-start-color: var(--colour-warn);
}

.message--error {
  border-inline-start-color: var(--colour-error);
}

/* --- Field-level validation (SRS §22.2): the error sits with its field --- */
.field {
  display: block;
  margin-bottom: var(--space-3);
}

.field__label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.field__error {
  display: block;
  margin-top: var(--space-1);
  color: var(--colour-error);
  font-size: 0.875rem;
}

/* ===================================================================== *
 * Authentication screens: sign-in (`login.html`, `.auth`) and the MFA
 * challenge (`login_mfa.html`, `.auth-card`).
 *
 * Both were unstyled before this: full-width, left-aligned, and their error
 * paragraphs (`.error` / `.form-error`) rendered as plain black text, so a
 * failed or expired code looked like no message at all. They are styled here
 * as one centred card, identically sized, because the two steps are one
 * sign-in and should look like it. Controls are sized by element, not class,
 * because the two forms have different inner structure -- login wraps each
 * control in `.field`, the challenge form uses bare `label`/`input`.
 * ===================================================================== */
.auth,
.auth-card {
  width: 100%;
  max-width: 26rem;
  margin: var(--space-5) auto;
  padding: var(--space-5);
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  box-shadow:
    0 1px 3px rgba(16, 30, 46, 0.08),
    0 8px 24px rgba(16, 30, 46, 0.06);
}

.auth label,
.auth-card label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.auth input,
.auth-card input {
  display: block;
  width: 100%;
  padding: var(--space-3);
  font: inherit;
  font-size: 1.125rem;
  color: var(--colour-text);
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  margin-bottom: var(--space-4);
}

.auth button[type="submit"],
.auth-card button[type="submit"] {
  display: block;
  width: 100%;
  padding: var(--space-3);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--colour-on-brand);
  background: var(--colour-brand);
  border: 1px solid var(--colour-brand-dark);
  border-radius: var(--radius);
  cursor: pointer;
}

.auth button[type="submit"]:hover,
.auth-card button[type="submit"]:hover {
  background: var(--colour-brand-dark);
}

/* One error treatment for both screens: a bordered block a user cannot miss.
   This is what makes an expired or wrong code produce a visible message. */
.auth .error,
.auth-card .form-error {
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  background: var(--colour-error-tint);
  border: 1px solid var(--colour-error);
  border-inline-start-width: 4px;
  border-radius: var(--radius);
  color: var(--colour-error);
  font-weight: 600;
}

/* A neutral notice (not a failure): e.g. arriving at sign-in because the
   verification code timed out. Same wording for everyone, so it says nothing
   about whether an account exists. */
.auth__notice {
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  background: var(--colour-info-tint);
  border: 1px solid var(--colour-brand-text);
  border-inline-start-width: 4px;
  border-radius: var(--radius);
  color: var(--colour-brand-text-strong);
  font-weight: 600;
}

.auth__note,
.auth-card .muted {
  margin-top: var(--space-4);
  color: var(--colour-text-muted);
  font-size: 0.9375rem;
}

.footer {
  padding: var(--space-3) var(--space-4);
  color: var(--colour-text-muted);
  font-size: 0.875rem;
  border-top: 1px solid var(--colour-border);
}

@media (max-width: 40rem) {
  .main {
    padding: var(--space-3);
  }

  .kv {
    grid-template-columns: 1fr;
  }
}

/* ===================================================================== *
 * Administration screens (Wave 3).
 *
 * Added once, by Track A, alongside the shared partials in
 * `app/templates/admin/`. Every class here is referenced by `_list.html` or
 * `_form.html`, so the three tracks building admin screens in this wave
 * extend the partials rather than this file (PARALLEL-EXECUTION §5.4).
 *
 * No new colour is introduced: everything below composes the tokens above.
 * ===================================================================== */

/* --- Identity block in the top bar --- */
.topbar__identity {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.identity__role {
  color: var(--colour-on-brand-subtle);
}

.identity__logout {
  display: inline;
}

/* --- Navigation list --- */
.nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --- Buttons and links --- */
.button {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--colour-brand-dark);
  border-radius: var(--radius);
  background: var(--colour-brand);
  color: var(--colour-on-brand);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  background: var(--colour-brand-dark);
}

/* Quiet buttons still read as controls: a border, not colour alone. */
.button--quiet {
  background: transparent;
  border-color: currentColor;
  color: inherit;
  font-weight: 400;
}

.button--danger {
  background: var(--colour-error);
  border-color: var(--colour-error);
}

.link {
  color: var(--colour-brand-text);
  text-decoration: underline;
}

.muted {
  color: var(--colour-text-muted);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Panels --- */
.panel {
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.panel__title {
  font-size: 1.125rem;
  margin-bottom: var(--space-3);
}

.panel--warning {
  border-inline-start: 4px solid var(--colour-warn);
}

/* --- Configuration tables --- */
.table-scroll {
  overflow-x: auto;
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table__caption {
  text-align: start;
  padding: var(--space-3) var(--space-3) 0;
  color: var(--colour-text-muted);
  font-size: 0.875rem;
}

.table th,
.table td {
  text-align: start;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--colour-border);
  vertical-align: top;
}

.table th {
  font-size: 0.875rem;
  color: var(--colour-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table__actions {
  white-space: nowrap;
}

.table__actions .link + .link {
  margin-inline-start: var(--space-3);
}

/* --- Status pill.
       The WORD is the signal (SRS §22.3, §22.16); the border is decoration on
       top of it. Never remove the text and keep the colour. --- */
.pill {
  display: inline-block;
  padding: 0 var(--space-2);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.pill--active {
  border-color: var(--colour-ok);
  color: var(--colour-ok);
}

.pill--archived {
  border-color: var(--colour-text-muted);
  color: var(--colour-text-muted);
}

/* Overdue. Uses the existing --colour-warn token rather than introducing a
   colour (contracts §10). The word "Overdue" is still the signal; this is
   decoration on top of it, and the pill is never rendered empty. */
.pill--warning {
  border-color: var(--colour-warn);
  color: var(--colour-warn);
}

/* Internal-only visibility on a ticket activity entry (SRS §25.7).
   Distinct from every other pill on purpose: from Wave 5 this page shows
   client-visible and internal entries in one timeline, and "which of these can
   the client read" is the question somebody scans for. The WORD "Internal" is
   the control -- INTERNAL is the default everywhere precisely because a
   mis-click that hides a comment is a nuisance and one that reveals an
   internal note is a breach. This only makes it easier to see at a glance. */
.pill--internal {
  border-color: var(--colour-brand-text);
  color: var(--colour-brand-text);
}

/* --- Empty state: the expected first-run condition, not an error --- */
.empty {
  background: var(--colour-surface);
  border: 1px dashed var(--colour-border);
  border-radius: var(--radius);
  padding: var(--space-5);
  text-align: center;
}

.empty__message {
  color: var(--colour-text-muted);
  margin-bottom: var(--space-3);
}

/* --- Pager --- */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.pager__summary {
  color: var(--colour-text-muted);
  font-size: 0.875rem;
}

.pager__list {
  display: flex;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --- Forms --- */
.form {
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  max-width: var(--measure);
}

.field__input {
  display: block;
  width: 100%;
  padding: var(--space-2);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  background: var(--colour-surface);
  color: var(--colour-text);
  font: inherit;
}

.field__hint {
  margin-bottom: var(--space-1);
  color: var(--colour-text-muted);
  font-size: 0.875rem;
}

.field--checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-2);
}

.field--checkbox .field__label {
  margin-bottom: 0;
}

.field--checkbox .field__hint {
  grid-column: 2;
}

.form__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* --- Filter bar above a list --- */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.filters .field {
  margin-bottom: 0;
}

/* --- Attachments panel (ATT-014, plan §14.3 screen 9) --- */
.attachments {
  margin-top: var(--space-5);
}

/* The count beside the heading. A muted pill rather than parentheses, so an
   empty panel reads as "0 files" rather than as a heading that failed to
   render its list. */
.attachments__count {
  display: inline-block;
  margin-inline-start: var(--space-2);
  padding: 0 var(--space-2);
  border-radius: var(--radius);
  background: var(--colour-surface-muted, var(--colour-surface));
  border: 1px solid var(--colour-border);
  color: var(--colour-text-muted);
  font-size: 0.8125rem;
  font-weight: 400;
}

.attachments__digests {
  margin-top: var(--space-3);
}

/* `<summary>` is a button in every sense but the element name, so it gets the
   affordance: a pointer, and a focus ring the keyboard user can see. Browsers
   give it neither by default. */
.attachments__digests > summary {
  cursor: pointer;
  padding: var(--space-2) 0;
  color: var(--colour-link, var(--colour-text));
}

.attachments__digests > summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.attachments__digests-note {
  margin: var(--space-2) 0;
  color: var(--colour-text-muted);
  font-size: 0.875rem;
  max-width: var(--measure);
}

.attachments__upload {
  margin-top: var(--space-4);
}
/* ==========================================================================
   Wave 5, Track C — collaboration and the notification centre.

   Appended as a block rather than interleaved, so two tracks adding rules in
   one wave conflict on adjacent lines instead of throughout the file.

   NO NEW COLOURS. Every rule below uses the existing --colour-* and --space-*
   tokens (contracts §10: "No track introduces a new colour — request one from
   the owner"). The internal-note treatment needed a tinted background and got
   it from --colour-bg on --colour-surface, which is the contrast the page
   already uses between the shell and its panels.
   ========================================================================== */

/* --- The conversation and the notes: two panels, unmistakably different --- */

.comments__list,
.notifications__list,
.timeline__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.comments__entry {
  border-bottom: 1px solid var(--colour-border);
  padding: var(--space-3) 0;
}

.comments__entry:last-child {
  border-bottom: 0;
}

/* SRS §22.2 wants an "obvious visual distinction". This is the *third* signal,
   not the first: the entry already carries the word "Internal" in a pill, and
   the composer carries the full sentence in its label. Colour and background
   are decoration on top of text that already says it (§22.3, §22.16) — a
   colour-blind agent loses nothing, and so does a printout. */
.comments__entry--internal {
  background: var(--colour-bg);
  border-inline-start: 3px solid var(--colour-brand);
  padding-inline-start: var(--space-3);
}

.comments__meta,
.timeline__meta,
.notifications__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 0 var(--space-1);
  color: var(--colour-text-muted);
  font-size: 0.875rem;
}

.comments__actor,
.timeline__actor {
  font-weight: 600;
  color: var(--colour-text);
}

/* `pre-wrap`, so a comment typed with paragraph breaks keeps them. The text is
   autoescaped in the template and set via textContent in comments.js, so
   preserving whitespace is a formatting decision and not a markup one. */
.comments__body,
.timeline__body,
.notifications__body {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.comments__composer {
  margin-top: var(--space-4);
}

/* --- The internal-note composer -------------------------------------------
   The strongest treatment on either page, because this is the box where a
   mis-posted sentence becomes a disclosure. */

.field--internal {
  background: var(--colour-bg);
  border-inline-start: 3px solid var(--colour-brand);
  border-radius: var(--radius);
  padding: var(--space-3);
}

.field__label--internal {
  display: block;
}

/* The warning is inside the <label> (COLLAB-004) so a screen reader announces
   it when focus enters the textarea rather than after the note is typed.
   `display: block` puts it on its own line for a sighted reader without
   moving it out of the label for anyone else. */
.notes__warning {
  display: block;
  margin-top: var(--space-1);
  color: var(--colour-brand-text-strong);
  font-weight: 600;
}

.notes__lock {
  margin-inline-end: var(--space-1);
}

.field__input--internal {
  background: var(--colour-surface);
}

/* --- The merged history --------------------------------------------------- */

.timeline__entry {
  border-bottom: 1px solid var(--colour-border);
  padding: var(--space-3) 0;
}

.timeline__entry:last-child {
  border-bottom: 0;
}

/* The activity type in words beside the actor, so a status change and a
   comment are distinguishable without reading the body. */
.timeline__type {
  text-transform: capitalize;
}

/* --- The notification centre ---------------------------------------------- */

.notifications__entry {
  border-bottom: 1px solid var(--colour-border);
  padding: var(--space-3) 0;
}

.notifications__entry:last-child {
  border-bottom: 0;
}

.notifications__entry--unread {
  border-inline-start: 3px solid var(--colour-warn);
  padding-inline-start: var(--space-3);
}

.notifications__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-2) 0 0;
}

/* A one-button form that must not break the line it sits on. Used by both
   mark-read controls, which are forms rather than links because they mutate
   and therefore need the CSRF field. */
.inline-form {
  display: inline;
  margin: 0;
}

/* The current filter in a filter bar. Weight and an underline, so it is not
   colour alone that says which view you are looking at. */
.link--current {
  font-weight: 600;
  text-decoration: underline;
}


/* --- Language and theme toggles (PHASE-16) ---------------------------------
 *
 * Sits inside `.topbar__identity`, so it inherits that flex row and keeps its
 * place whether or not anybody is signed in -- the sign-in screen is the page
 * that needs the language control most.
 *
 * Every colour is a token, so the dark block at the foot of this file themes
 * these controls without a single rule being repeated for dark.
 */
.prefs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.prefs__form {
  display: inline;
}

.prefs__button {
  padding: var(--space-1) var(--space-2);
  font: inherit;
  font-size: 0.875rem;
  color: var(--colour-on-brand);
  background: transparent;
  border: 1px solid var(--colour-on-brand-subtle);
  border-radius: var(--radius);
  cursor: pointer;
}

.prefs__button:hover {
  background: var(--colour-brand);
}

/* --- Dark theme (PHASE-16, change 2) ---------------------------------------
 *
 * THREE states, not two. `system` is the default and follows the OS; `light`
 * and `dark` are explicit and override it. A visitor who has already told
 * their operating system should not have to tell this application too.
 *
 * Hence two selectors for one palette:
 *
 *   @media (prefers-color-scheme: dark) :root:not([data-theme="light"])
 *       the OS asked for dark and nobody has overridden it
 *   :root[data-theme="dark"]
 *       somebody pressed the toggle
 *
 * The `:not([data-theme="light"])` is the entire reason an explicit LIGHT
 * choice can win on a machine set to dark.
 *
 * **These two blocks are a deliberate duplicate**, which is the one thing this
 * project says not to build -- CSS cannot share a declaration list across a
 * media-query boundary, so there is no version of this with a single copy.
 * The duplicate is made safe by a check rather than by care:
 * `tests/unit/test_theme_css.py` asserts the two blocks are character-
 * identical and fails if either is edited alone.
 *
 * Only tokens are redefined. No rule below :root is repeated, so a screen
 * style written later is themed by construction rather than by remembering.
 *
 * Every colour here was MEASURED against WCAG AA -- the standard the light
 * theme already meets -- not chosen by eye. `test_theme_contrast.py`
 * recomputes the ratios from this file, so the numbers cannot drift away from
 * the palette they describe.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --colour-text: #e7edf4;
  --colour-text-muted: #a9b6c4;
  --colour-bg: #12171d;
  --colour-surface: #1b222b;
  --colour-border: #3a4653;
  --colour-brand: #1f5f9c;
  --colour-brand-dark: #11293d;
  --colour-brand-text: #6cb6f2;
  --colour-brand-text-strong: #9ccdf8;
  --colour-focus: #ffa94d;
  --colour-ok: #54c281;
  --colour-warn: #e0aa47;
  --colour-error: #f0736f;
  --colour-on-brand: #ffffff;
  --colour-on-brand-muted: #e3edf6;
  --colour-on-brand-subtle: #c2d7ea;
  --colour-error-tint: #3a1d1d;
  --colour-info-tint: #15293c;
  }
}

:root[data-theme="dark"] {
  --colour-text: #e7edf4;
  --colour-text-muted: #a9b6c4;
  --colour-bg: #12171d;
  --colour-surface: #1b222b;
  --colour-border: #3a4653;
  --colour-brand: #1f5f9c;
  --colour-brand-dark: #11293d;
  --colour-brand-text: #6cb6f2;
  --colour-brand-text-strong: #9ccdf8;
  --colour-focus: #ffa94d;
  --colour-ok: #54c281;
  --colour-warn: #e0aa47;
  --colour-error: #f0736f;
  --colour-on-brand: #ffffff;
  --colour-on-brand-muted: #e3edf6;
  --colour-on-brand-subtle: #c2d7ea;
  --colour-error-tint: #3a1d1d;
  --colour-info-tint: #15293c;
}