/*
 * SyncroHealth colour tokens.
 *
 * The frontend audit recorded "9,367 hardcoded hex colours against 6 custom
 * properties". Both halves were wrong, and the corrected figures are in
 * FRONTEND_AUDIT.md: there are 40,204 hex literals in total, but 36,900 of
 * them are in the purchased Bootstrap theme under static/assets and
 * static/pcss, which is vendored and not ours to restructure. Bootstrap 5
 * already ships a token layer of its own - 2,227 custom properties are
 * defined across static/, almost all of them --bs-*.
 *
 * What was genuinely untokenised is this: 319 hex literals written directly
 * into our own page templates, spanning 52 distinct values, of which only 11
 * are used once. The rest are brand and status colours repeated by hand
 * across 52 templates, so changing the brand teal meant 32 edits.
 *
 * Every value here is byte-identical to the literal it replaces, and every
 * use site keeps that literal as the var() fallback:
 *
 *     color: var(--sh-brand, #1dbfc1);
 *
 * so if this stylesheet ever fails to load, the colour is unchanged. This
 * file cannot cause a visual regression; it can only centralise one.
 *
 * Names are semantic where the usage made the intent clear, and descriptive
 * where it did not. Guessing a meaning that is not there would be worse than
 * saying "this is the mid grey".
 */

:root {
  /* Brand ---------------------------------------------------------------- */
  --sh-brand: #1dbfc1;          /* teal: primary brand mark, 32 uses */
  /* The same teal, darkened until it clears WCAG AA in the two places the
   * bright one cannot: as text on a light panel (4.61:1) and as a button
   * background under white text (4.53:1). Measured, not picked - lightness
   * walked in HLS with hue and saturation held, so it is the brand teal at a
   * different value rather than a different colour. Used by
   * static/css/accessibility.css. */
  --sh-brand-deep-accessible: #137b7c;
  --sh-brand-deep: #2f579a;     /* blue: secondary brand, 17 uses */

  /* Clinical UI ---------------------------------------------------------- */
  --sh-form-label: #c6811a;     /* amber on clinical form option labels, 19 uses */
  --sh-gauge: #faa700;          /* jQuery Knob vital-sign dials, 15 uses */
  --sh-gauge-alt: #ff6849;      /* the second dial colour, 12 uses */
  --sh-info: #3e8ef7;           /* informational accent, 9 uses */

  /* Neutrals ------------------------------------------------------------- */
  --sh-white: #ffffff;
  --sh-surface: #f5f5f5;        /* panel background */
  --sh-border: #dddddd;
  --sh-text: #333333;
  --sh-text-muted: #777777;
}

/*
 * Respect a user's request for reduced motion.
 *
 * Bootstrap already guards its own components, and one stylesheet
 * (message_enhancements.css) guarded its own, but nothing covered animation
 * and transition declared anywhere else - including the inline <style> blocks
 * scattered through the page templates.
 *
 * The durations are 0.01ms rather than 0 on purpose: a component that waits
 * for transitionend or animationend still receives the event and does not
 * hang. This is the widely used form of the rule.
 *
 * It only applies when the user has explicitly asked their operating system
 * for reduced motion, which is why !important is acceptable here and would
 * not be anywhere else in this file.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}