/* ==== TrainMe brand tokens — import this before your own styles ==== */
:root {
  --tm-indigo: #3B3FBF;        /* primary — buttons, links, tile */
  --tm-indigo-dark: #3236A6;   /* hover state */
  --tm-indigo-soft: #EEF0FF;   /* light backgrounds, highlights */
  --tm-amber: #FFB020;         /* accent — badges, progress, highlights */
  --tm-amber-soft: #FFF3D6;
  --tm-ink: #111827;           /* body text on light */
  --tm-muted: #6B7280;         /* secondary text */
  --tm-night: #0B1220;         /* dark backgrounds */
  --tm-surface: #FFFFFF;
  --tm-surface-dark: #131B2E;

  --tm-font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tm-radius: 12px;           /* same feel as the icon's corners */
  --tm-radius-lg: 20px;
}

/* logo helpers: <img class="tm-logo" src="/logo/trainme-logo-horizontal-light.svg" alt="TrainMe"> */
.tm-logo { height: 44px; width: auto; display: block; }
.tm-logo--small { height: 32px; }
.tm-logo--icon { height: 40px; width: 40px; }

/* example primary button in brand style */
.tm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--tm-indigo); color: #fff; border: 0; border-radius: var(--tm-radius);
  padding: 12px 20px; font: 600 15px var(--tm-font); cursor: pointer; text-decoration: none;
}
.tm-btn:hover { background: var(--tm-indigo-dark); }
.tm-btn:focus-visible { outline: 3px solid var(--tm-amber); outline-offset: 2px; }
.tm-btn--accent { background: var(--tm-amber); color: var(--tm-ink); }