/* Colour, type and radii: the one place a colour is written. Scripts that draw
   on a canvas read these through getComputedStyle rather than restating them.
   Taken from the Qualia/Causal Map tokens. The neon mint is for dark grounds
   only; on light ones the accent is the deep green. */

:root {
  --ok:   #1a9d6a;
  --warn: #c99700;
  --bad:  #d1495b;

  --bg:            #f6f8f7;
  --surface:       #ffffff;
  --surface-2:     #eef2f0;
  --border:        #dde5e1;
  --border-strong: #c7d2cc;
  --text:          #1c2621;
  --text-dim:      #5c6b64;
  --text-faint:    #8a978f;
  --accent:        #0f8f6b;
  --accent-ink:    #ffffff;
  --accent-soft:   #e3f3ec;
  /* Qualia's voice: the muted red, which Steve can tell from the people's
     green at the size bubbles are drawn. */
  --voice-ai:      #a83f70;
  --voice-ai-fill: #fdeef4;
  --gold:          #9a7b16;
  --gold-fill:     #f7f0c4;
  /* Four groups told apart in a picture (the Home page's), from the brand's
     light blue, pink and yellow and the accent, deepened to show on white. */
  --group-1:       #2f8f95;
  --group-2:       #c2457a;
  --group-3:       #a58a00;
  --group-4:       #0f8f6b;
  /* A like given: the yellow fill of the thumb, and its outline. The fill is
     1.6:1 on white, so on a light ground the outline carries it (5.5:1). */
  --like:          #f5c518;
  --like-ink:      #8a6100;
  /* The colours a box on a map may be (NOTE_COLOURS in step-names.js), pale enough for --text to read on. */
  --note-yellow:   #fff1a6;
  --note-orange:   #ffd8a8;
  --note-pink:     #ffd3e2;
  --note-blue:     #cfe4ff;
  --note-green:    #cdeed9;
  --shadow:    0 1px 2px rgba(20,40,32,.06), 0 6px 20px rgba(20,40,32,.06);
  --shadow-sm: 0 1px 2px rgba(20,40,32,.07);

  --q-font: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r:      10px;
  --r-sm:   7px;
  --r-pill: 999px;
}

/* Dark, when the person or their system chose it (web/js/theme-early.js sets
   data-theme before the page draws). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:            #14201b;
  --surface:       #1b2b23;
  --surface-2:     #223529;
  --border:        #2c3f34;
  --border-strong: #3a5145;
  --text:          #e8f0ec;
  --text-dim:      #9fb3a8;
  --text-faint:    #728579;
  --accent:        #00FFAF;
  --accent-ink:    #0b1a13;
  --accent-soft:   #1f3a2f;
  --voice-ai:      #FF8FB8;
  --voice-ai-fill: #35202a;
  --gold:          #F7ED73;
  --gold-fill:     #3b3a20;
  --group-1:       #6DC4C8;
  --group-2:       #FF8FB8;
  --group-3:       #F7ED73;
  --group-4:       #00FFAF;
  --like:          #ffd43b;
  --like-ink:      #e0a800;
  --note-yellow:   #4d4620;
  --note-orange:   #553a1f;
  --note-pink:     #552b3d;
  --note-blue:     #1f3a57;
  --note-green:    #1f4632;
  --shadow:    0 1px 2px rgba(0,0,0,.35), 0 8px 26px rgba(0,0,0,.35);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
}

/* Bootstrap draws its controls' edges from a variable of its own, which nothing
   here set, so every field and unchecked box was edged in Bootstrap's pale grey
   on either ground. Fields take --border-strong; the small controls whose edge
   is all there is of them (checkboxes, radios, switches) take --text-faint,
   which keeps them at 3:1 against the surface, as an outline a person must find
   needs to be. A checked or focused one keeps Bootstrap's own colour. */
:root { --bs-border-color: var(--border-strong); }
.form-check-input { border-color: var(--text-faint); }