/* Heartio · Attune design tokens
   Source: Heartio Attune Design System.dc.html (v1 — "Instrument · Gauge")
   One visual grammar: tick rulers, needles, graduated bars. Dark only. */

:root {
  /* surfaces */
  --bg: #0B1220;
  --surface: #0F1728;
  --surface-raised: #101A2E;
  --control: #131E33;

  /* the four functional colors — never decorative */
  --coral: #FF4D5E;        /* action & the heart itself · one coral CTA per screen, max */
  --cyan: #43C6E0;         /* Attune exclusively — cyan means "your score is involved" */
  --amber: #E09A3C;        /* time & persistence: streaks, Lifelines, pending */

  /* ink */
  --text: #E9EDF5;
  --text-2: #9FB0C8;
  --muted: #7E89A3;
  --muted-2: #5A667D;
  --faint: #41507A;
  --tick: #2A3854;
  --tick-minor: #222F4A;

  /* hairlines & semantic borders (18–35% alpha) */
  --hairline: rgba(255, 255, 255, .06);
  --hairline-strong: rgba(255, 255, 255, .08);
  --coral-border: rgba(255, 77, 94, .35);
  --cyan-border: rgba(67, 198, 224, .2);
  --amber-border: rgba(224, 154, 60, .3);

  /* tints (10% for semantic chips) */
  --coral-tint: rgba(255, 77, 94, .08);
  --cyan-tint: rgba(67, 198, 224, .08);
  --amber-tint: rgba(224, 154, 60, .1);

  /* glow — reserved for hero numbers, tier words, the beating heart, CTA shadows */
  --coral-glow: rgba(255, 77, 94, .35);
  --cyan-glow: rgba(67, 198, 224, .35);
  --cta-shadow: 0 10px 30px rgba(255, 77, 94, .35);

  /* type — one family, tabular numerals for anything that counts */
  --font: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;

  /* spacing: 4px base — 8/12/16/20/24 in layouts; screens pad 20–24 */
  --pad-screen: 24px;

  /* radii: pills 999 · cards 16–20 · tiles 8–12 */
  --r-pill: 999px;
  --r-card: 20px;
  --r-card-sm: 16px;
  --r-tile: 12px;

  /* motion */
  --needle-ease: cubic-bezier(.2, .9, .3, 1.15); /* 600ms, slight overshoot, like a real meter */
}

/* hbeat — 1.6s double-thump for live hearts (max one beating heart per screen) */
@keyframes hbeat {
  0% { transform: scale(1); }
  14% { transform: scale(1.14); }
  28% { transform: scale(1); }
  42% { transform: scale(1.08); }
  70% { transform: scale(1); }
  100% { transform: scale(1); }
}

/* blinkdot — 1.4–1.8s pulse for pending/live dots */
@keyframes blinkdot {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}