/* Panum brand tokens: the one place this app takes its colours and type from.
   Values are the Panum brand, version 1.0 (5 October 2026; project doc motility-lab/brand.md). Change a brand value
   here and nowhere else; the page's own styles only refer to these names.

   The one rule: one red point per view. The wordmark's full stop is that point, so with the wordmark on screen nothing
   else in the interface is red, and red never means an error or a wrong answer. Keep the patient stage neutral. */

/* type: self-hosted (SIL Open Font Licence, see fonts/FONTS-LICENCE.txt), so the page makes no request to a font
   service */
@font-face{font-family:"Source Serif 4 Display";src:url("fonts/SourceSerif4-Display-Semibold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("fonts/SourceSerif4-Semibold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("fonts/InstrumentSans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("fonts/InstrumentSans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("fonts/InstrumentSans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/IBMPlexMono-500.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap}

:root{
  /* colour, light */
  --graphite:#1F2328;        /* app icon ground (both themes); primary button fill in light */
  --on-graphite:#FAF8F3;     /* text and rings on graphite */
  --red:#D7262E;             /* hatpin red: the one red point. Text-safe on paper and surface-raised only, never on tint */
  --on-red:#FFFFFF;
  --paper:#FAF8F3;           /* page and app ground */
  --surface-raised:#FFFFFF;  /* cards, sheets, panels */
  --tint:#F0EDE6;            /* selected chips, hover rows, info boxes */
  --hairline:#DDD8CE;        /* dividers and card borders (decorative, never the only edge of a control) */
  --ink:#14171C;             /* text, headings, underlined links, focus rings */
  --muted:#5A5F68;           /* secondary text, captions, footer line */
  --success:#1E6B52;         /* always with a tick and a word */
  --error:#B4460C;           /* always with a cross and a word */

  /* the logo files: always these values, whatever the theme */
  --logo-red:#D7262E;
  --logo-ink:#14171C;
  --logo-ink-reversed:#FAF8F3;

  /* usage */
  --primary-fill:var(--graphite);  /* primary button: graphite and on-graphite in light, ink and paper in dark */
  --primary-ink:var(--on-graphite);
  --focus-ring:var(--ink);         /* 2px solid, offset 2px */

  /* grounds that are dark in both themes: the cards and chips floating over the patient stage */
  --on-dark-ink:#F2F0EB;
  --on-dark-muted:#A3A8B0;
  --on-dark-hairline:rgba(250,248,243,.14);
  --on-dark-success:#5BBE95;
  --on-dark-error:#F08A4B;
  --glass-ground:rgba(27,30,35,.78);  /* surface-raised (dark) over the stage, translucent */

  /* type */
  --font-display:"Source Serif 4 Display","Source Serif 4",Georgia,serif;  /* the largest headline only */
  --font-serif:"Source Serif 4",Georgia,serif;                             /* page and sheet titles */
  --font-sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;  /* all interface text: 400, 500, 600 */
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",monospace;            /* every number the trainee reads: 500 */
  --weight-body:400; --weight-label:500; --weight-heading:600;

  /* shape and space */
  --radius-sm:4px;     /* inputs, chips, tooltips */
  --radius-md:10px;    /* cards, sheets, buttons, the instrument tray */
  --radius-pill:999px; /* slider thumbs, toggles */
  --space-1:4px; --space-2:8px; --space-4:16px; --space-8:32px;

  color-scheme:light;
}

/* colour, dark: follows the device setting unless a page sets data-theme */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --red:#EC5A4F; --on-red:#121417;
    --paper:#121417; --surface-raised:#1B1E23; --tint:#23272E; --hairline:#2C3038;
    --ink:#F2F0EB; --muted:#A3A8B0;
    --success:#5BBE95; --error:#F08A4B;
    --logo-ink:#FAF8F3;
    --primary-fill:var(--ink); --primary-ink:var(--paper);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --red:#EC5A4F; --on-red:#121417;
  --paper:#121417; --surface-raised:#1B1E23; --tint:#23272E; --hairline:#2C3038;
  --ink:#F2F0EB; --muted:#A3A8B0;
  --success:#5BBE95; --error:#F08A4B;
  --logo-ink:#FAF8F3;
  --primary-fill:var(--ink); --primary-ink:var(--paper);
  color-scheme:dark;
}