/* Toa Health, design tokens.
 *
 * Architecture is carried over from Savage Ops (savage-ops/dashboard):
 * one :root token block, a 12-column deck, a panel/card component with
 * head + body + foot, section-banner comments, no build step.
 *
 * The look is NOT carried over. Savage Ops is a dark cyan mission
 * control on purpose. This is the opposite brief: someone opens Toa
 * Health on a hard day, so the surface is warm, light and quiet.
 *
 * Every color below was checked before it was used, not eyeballed:
 *   - status trio (#54803F, #C4881F, #A63030) passes lightness band,
 *     chroma floor, colorblind separation, normal-vision separation and
 *     contrast against the surface.
 *   - every text token clears 4.5:1 against the surface it sits on.
 *     Status text uses the darker *-ink variants, since the mark colors
 *     themselves are tuned for marks, not for type.
 */

:root {
  /* --- warm neutral base ------------------------------------------- */
  --canvas:      #fbf8f4;   /* page, warm cream */
  --surface:     #ffffff;   /* cards */
  --surface-2:   #f5f0e8;   /* inset panels, warm sand */
  --surface-3:   #efe8de;   /* pressed / hover on sand */
  --border:      #e7dfd5;
  --border-2:    #d9cec0;

  /* --- ink ---------------------------------------------------------- */
  --ink:         #2e2823;   /* 13.7:1 on canvas */
  --ink-2:       #5c534b;   /*  7.1:1 */
  --ink-3:       #786d63;   /*  4.8:1, the floor for real text */
  --ink-on-dark: #fbf8f4;

  /* --- accent, muted terracotta ------------------------------------- */
  --accent:      #b0563a;   /* white on this is 4.95:1 */
  --accent-dk:   #9c4a30;
  --accent-tint: #f7ede8;
  --accent-ring: rgba(176, 86, 58, 0.22);

  /* --- secondary, warm sage ----------------------------------------- */
  --sage:        #5a6e52;
  --sage-tint:   #edf0ea;

  /* --- status. Never used alone: every status ships an icon and a
         word next to it, so color is the third signal, not the only
         one. Reserved, never recycled as a data series. -------------- */
  --good:        #54803f;  --good-ink:  #446a32;  --good-tint:  #e7eade;
  --watch:       #c4881f;  --watch-ink: #8e5e17;  --watch-tint: #f4ebda;
  --high:        #a63030;  --high-ink:  #8e2828;  --high-tint:  #f1e0dc;

  /* --- data series. One hue for every sparkline, because the three
         lab cards are small multiples of the same thing, not three
         competing categories. The reading is carried by the hero
         number; the line is context and stays recessive. ------------- */
  --series:      #9a8b7d;
  --series-soft: rgba(154, 139, 125, 0.16);

  /* --- type --------------------------------------------------------- */
  --sans: ui-sans-serif, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --serif: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* --- spacing scale. Same idea as Savage Ops' --gap, widened: this
         layout leans on whitespace where that one leaned on glow. ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 104px;
  --gap: 20px;

  /* --- shape. Rounded over sharp, soft shadow over hard edge. ------- */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(46, 40, 35, 0.05),
               0 2px 6px rgba(46, 40, 35, 0.04);
  --shadow:    0 2px 4px rgba(46, 40, 35, 0.04),
               0 8px 24px rgba(46, 40, 35, 0.07);
  --shadow-lg: 0 4px 8px rgba(46, 40, 35, 0.05),
               0 20px 48px rgba(46, 40, 35, 0.10);

  --measure: 62ch;
  --page: 1140px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}