/* tokens.css — shared design system (clinical blue-gray + teal, copper for Honors) */
:root {
  /* Surfaces */
  --bg:           #eaf0f2;
  --bg-2:         #dde7ea;
  --surface:      #ffffff;
  --surface-2:    #f4f8f9;
  --surface-3:    #eef4f5;
  --border:       #cfdbe0;
  --border-strong:#aebfc6;

  /* Ink */
  --ink:    #1c2a31;
  --ink-2:  #38484f;
  --muted:  #687a82;

  /* Teal-blue accent (primary) */
  --accent:      #2a7d8a;
  --accent-700:  #1d5b66;
  --accent-300:  #79b0ba;
  --accent-100:  #d6e8eb;
  --accent-050:  #e8f2f4;

  /* Copper accent — reserved exclusively for the Honors track */
  --honors:      #c0772f;
  --honors-700:  #95591f;
  --honors-100:  #f1ddc8;
  --honors-050:  #f8eee2;

  /* Semantic */
  --success:     #2f8f5b;
  --success-050: #e4f2ea;
  --warn:        #b8881f;
  --warn-050:    #f6eed8;
  --danger:      #bf4a30;
  --danger-050:  #f6e6e1;

  /* Dial tones — CATEGORICAL hues for the half-circle gauges (x-gauge).
     A tone says WHICH quantity a gauge reads, so two gauges side by side are
     told apart at a glance. It never says whether a value is good: a falling
     pressure is not a failure, so each arc keeps one hue across its whole
     travel and direction is carried by the arrow, the word, and which side of
     the baseline the arc grows from. Values come from render.js's species
     palette, so a dial and a chart of the same substance agree. Copper
     (Honors) and amber (warn) are deliberately absent: they mean other things.
     -deep is the off-scale cap, -soft the resting arc track. */
  --dial-teal:        #2a7d8a;
  --dial-teal-deep:   #1d5b66;
  --dial-indigo:      #5a6b9c;
  --dial-indigo-deep: #41507a;
  --dial-green:       #4d8a5b;
  --dial-green-deep:  #366742;
  --dial-plum:        #9c5a87;
  --dial-plum-deep:   #7a4169;
  --dial-slate:       #5f7480;
  --dial-slate-deep:  #45575f;

  /* One family across readings, missions, and cases. The legacy data-font role
     shares Nunito Sans; numeric components keep their tabular-number settings. */
  --font-body:    'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: var(--font-body);
  --font-mono:    var(--font-body);

  --fs-micro: 0.6875rem; /* 11px: graphical / secondary metadata only */
  --fs-2xs:   0.6875rem; /* compatibility alias for axis ticks / diagram labels */
  --fs-xs:    0.75rem;   /* 12px metadata */
  --fs-ui:    0.8125rem; /* 13px compact controls */
  --fs-sm:    0.875rem;  /* 14px supporting text */
  --fs-md:    1rem;      /* 16px primary reading text */
  --fs-lg:    1.125rem;  /* 18px panel title / key value */
  --fs-xl:    1.375rem;  /* 22px section heading */
  --fs-2xl:   1.75rem;   /* 28px page title */
  --fs-3xl:   2.25rem;   /* 36px landing hero */

  --lh-display: 1.1;
  --lh-tight:   1.15; /* compatibility for existing shared components */
  --lh-heading: 1.2;
  --lh-ui:      1.3;
  --lh-compact: 1.4;
  --lh-body:    1.52;
  --lh-reading: 1.6;

  /* Spacing (4px base) */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;

  /* Radius + shadow + motion */
  --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(28,42,49,.06), 0 1px 3px rgba(28,42,49,.08);
  --shadow-md: 0 4px 10px rgba(28,42,49,.08), 0 2px 4px rgba(28,42,49,.06);
  --shadow-lg: 0 14px 40px rgba(28,42,49,.14);
  --ease: cubic-bezier(.2,.7,.3,1);
  --t-fast: .14s; --t-med: .26s;

  /* Tuned for a 15-inch laptop, the default viewing device. Wide enough that the
     18-column periodic table and the 300px standards rail both sit comfortably,
     while keeping a visible margin so the page reads as a column, not edge-to-edge. */
  --maxw: 1200px;
}