/* Design tokens — the single source of truth for colour, spacing and radius.
 *
 * Before this file the stylesheets carried 197 distinct hex values across 831
 * uses, so the same indigo existed as #6c63ff, #574fd6 and #5c54ec and greys
 * drifted between #667085, #344054, #1f2937, #334155, #333 and #666. Nothing
 * could be themed or rebranded.
 *
 * Values here match what the app already renders, so adopting a token is a
 * like-for-like swap with no visual change. Migrate a file at a time.
 */

:root {
  /* --- brand ------------------------------------------------------------ */
  --oa-accent: #6c63ff;
  --oa-accent-hover: #574fd6;
  --oa-accent-wash: #eeecfd;
  --oa-accent-border: #c9c5f4;
  /* Unlit part of a progress ring or track. Deliberately weaker than
     --oa-accent-border: a track is scenery behind a moving indicator, and at
     border strength it competes with the arc instead of framing it. */
  --oa-accent-track: rgba(108, 99, 255, 0.16);

  /* Application frame. The rail is the contrast anchor that says "you are
     inside the app" rather than on the marketing site. */
  --oa-rail: #171b26;
  --oa-rail-ink: #cfd5e0;

  /* Radiograph viewing ground. Dark on purpose: a bright surround constricts
     the pupil and washes out the low-contrast bone edges a clinician is
     trying to land a landmark on. */
  --oa-stage: #0f1218;

  /* --- neutrals --------------------------------------------------------- */
  --oa-ink: #1a1f2a;
  --oa-ink-soft: #344054;
  --oa-muted: #626c7d;
  --oa-faint: #929aa8;
  --oa-line: #e2e6ee;
  --oa-line-soft: #eef0f6;
  --oa-surface: #ffffff;
  --oa-surface-sunken: #f7f8fb;

  /* --- clinical status -------------------------------------------------- */
  /* Out-of-range is amber, not red: a slightly high ANB is a finding, not an
     error. Red stays reserved for things that are actually broken. Neither
     colour is ever the only cue — every value carries a HIGH / LOW / OK
     label so the reading survives colour vision deficiency and greyscale. */
  --oa-in-range: #16785c;
  --oa-in-range-wash: #e7f3ee;
  --oa-out-range: #a06a05;
  --oa-out-range-wash: #fbf2df;
  --oa-range-band: #bcd9cd;
  --oa-range-base: #e6e9f1;
  --oa-danger: #c0392b;

  /* --- geometry --------------------------------------------------------- */
  --oa-space-1: 4px;
  --oa-space-2: 8px;
  --oa-space-3: 12px;
  --oa-space-4: 16px;
  --oa-space-5: 24px;
  --oa-space-6: 32px;
  --oa-space-7: 48px;

  --oa-radius-sm: 6px;
  --oa-radius-md: 8px;
  --oa-radius-lg: 12px;
  --oa-radius-pill: 999px;

  --oa-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --oa-shadow-md: 0 8px 20px rgba(15, 23, 42, 0.08);
  --oa-shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.1);
}