/* ═══════════════════════════════════════════════════════════
   PepCoach Design Tokens — single source of truth
   Source: /design/active-workout-v1/design-tokens.md
   Do not hard-code colors, type, or spacing values in component
   CSS. Reference these custom properties instead.
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600;700&display=swap');

:root {
  /* ── Surfaces ─────────────────────────────────────────── */
  --bg-primary:   #000000;
  --bg-elevated:  #0F0F0F;
  --bg-card:      #1A1A1A;
  --border:       #1F1F1F;
  --divider:      #2A2A2A;

  /* ── Text ─────────────────────────────────────────────── */
  --text-primary:  #FFFFFF;
  --text-muted:    #8E8E93;
  --text-disabled: #48484A;

  /* ── Accents ──────────────────────────────────────────── */
  /* Lime: action + identity. Accent only, never large fill.   */
  --accent-lime:   #C6FF00;
  /* Gold: achievement only. PR badges, BETA, streaks.         */
  --accent-gold:   #D4AF37;
  /* Green: "done" only. Completed checkmarks, logged tint.    */
  --accent-green:  #34C759;
  /* Error: destructive states.                                */
  --accent-error:  #FF3B30;

  /* Tinted backgrounds (5% washes used by row states) */
  --tint-white-05:  rgba(255, 255, 255, 0.05);
  --tint-green-05:  rgba(52, 199, 89, 0.08);

  /* ── Typography ───────────────────────────────────────── */
  --font-ui:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — see design-tokens.md §Typography */
  --fs-workout-title: 22px;   /* Inter Semibold */
  --fs-volume-hero:   28px;   /* Inter Bold */
  --fs-exercise-name: 17px;   /* Inter Semibold */
  --fs-body:          15px;   /* Inter Regular */
  --fs-set-num:       15px;   /* Inter Medium muted */
  --fs-number-cell:   17px;   /* JetBrains Mono Semibold */
  --fs-label-tiny:    11px;   /* Inter uppercase letter-spaced */

  --ls-label: 0.08em;

  /* ── Spacing (4px base) ───────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;

  --row-height: 52px;
  --tap-target-min: 44px;

  /* ── Radii ────────────────────────────────────────────── */
  --radius-card: 14px;
  --radius-pill: 999px;
  --radius-input: 8px;

  /* ── Motion ───────────────────────────────────────────── */
  --ease-bounce: cubic-bezier(.2, .8, .2, 1.05);
  --dur-bounce:  200ms;
  --dur-tween:   400ms;
}

/* ── Utility classes that reference tokens ────────────────
   Use sparingly; component CSS should reach for the variables
   directly so token changes propagate without touching markup.
   ───────────────────────────────────────────────────────── */
.tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }