/* Design tokens: the brand palette (see design/site-design-guidelines.md), derived shades,
   type, shape, and the four pain-tab tones. Every other stylesheet uses these names. */

:root {
  --bg: #F7FAF9;
  --ink: #16232A;
  --muted: #4E5D63;
  --card: #FFFFFF;
  --line: #DCE6E5;
  --surface-2: #E6ECEC;

  --accent: #0E6B73;
  --accent-hover: #0B5960;
  --accent-2: #14919B;
  --accent-ink: #0A474D;
  --tint: #E1F0F0;

  --pending: #B45309;
  --pending-bg: #FDF0DC;
  --pending-ink: #7A3A06;
  --error: #B42318;

  --on-dark-muted: #A9C4C6;
  --on-dark-faint: #A0B3B6;

  --radius: 20px;
  --head: "Rubik", "Heebo", system-ui, sans-serif;
  --body: "Heebo", system-ui, sans-serif;
}

/* Pain-tab tones: --hue (icon, timer), --hue-2 (gradient end), --wash (panel tint), --hue-ink (text on wash). */
.tone-teal  { --hue: var(--accent);  --hue-2: var(--accent-2); --wash: var(--tint); --hue-ink: var(--accent-ink); }
.tone-amber { --hue: var(--pending); --hue-2: #E0892B; --wash: #FCEFDC; --hue-ink: var(--pending-ink); }
.tone-ocean { --hue: #1F5F8B; --hue-2: #3A8CC4; --wash: #E3EEF7; --hue-ink: #123E61; }
.tone-slate { --hue: #3A4A57; --hue-2: #6B7F8E; --wash: #ECF0F3; --hue-ink: #1E2A33; }