/*
  Design tokens. This is the one file to edit if the palette, spacing, or
  font stack ever changes — no hex/px values should be hardcoded in style.css.
  Dark mode only, no toggle.
*/

:root {
  /* ---- Color ---- */
  --bg-app: #0B0B0F;            /* app background — near-black, cool undertone */
  --bg-surface: #18181F;        /* card/surface background — one step up for elevation */
  --bg-surface-raised: #222229; /* active/expanded surfaces (level-selector track, checklist rows) */
  --border-hairline: rgba(255, 255, 255, 0.08);

  --text-primary: #F5F5F7;      /* off-white, not pure white — reduces glare */
  --text-secondary: #9A9AA5;

  --accent-strength: #FF6B4A;   /* 🏋 hot coral-orange — power/intensity */
  --accent-cardio: #FF3D7F;     /* 🏃 electric pink-red — heart rate/energy */
  --accent-mobility: #3DDC97;   /* 🧘 mint-teal — calm/recovery */

  --cta-bg: #F5F5F7;            /* Share button — off-white, the brightest thing on screen */
  --cta-text: #0B0B0F;

  /*
    Foreground for content sitting on a solid accent fill (checkbox check,
    completion badge glyph, active level-selector segment). Near-black reads
    far better here than white: against these bright/saturated accents on
    --bg-surface, white text/icons measure ~1.6:1 (mobility) to ~3.1:1
    (cardio) — under the 3:1 WCAG floor for graphical objects. Near-black
    measures 5.8–11:1 against all three. Same "high-contrast" intent, the
    color that actually clears the bar.
  */
  --on-accent: var(--cta-text);

  /* ---- Type ---- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Rounded", sans-serif;

  /* ---- Radii ---- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 12px 28px -14px rgba(0, 0, 0, 0.7);
  --shadow-pill: 0 2px 6px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  --shadow-track: inset 0 1px 3px rgba(0, 0, 0, 0.35);

  /* ---- Spacing ---- */
  --space-xs: 6px;
  --space-sm: 10px;
  --space-md: 16px;
  --space-lg: 24px;

  /* ---- Motion ---- */
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Layout ---- */
  --tap-min: 44px;
}

/*
  Collapsing the duration tokens to 0ms (rather than removing each
  transition/animation individually) keeps every *functional* state change
  (checked, level picked, card border color) instant instead of animated,
  and makes every *decorative* animation (glow, pop, scale) resolve with no
  visible motion — satisfying "keep functional changes, drop the rest" from
  one place.
*/
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
  }
}

/* Category → accent mapping. Change here if categories are ever renamed. */
.category-card[data-category="strength"] { --cat-accent: var(--accent-strength); }
.category-card[data-category="cardio"]   { --cat-accent: var(--accent-cardio); }
.category-card[data-category="mobility"] { --cat-accent: var(--accent-mobility); }