/*
 * Pilates Club — the logo's pink → orange → yellow gradient, deep plum ink,
 * soft rounded cards instead of KTC's hard offset shadows.
 */
:root {
  /* Solid fallback in the middle of the gradient, in case gradients are
     unavailable (very old mail-preview browsers, print). */
  --bg: #FF6A34;
  --bg-image:
    radial-gradient(115% 95% at 12% 22%, #F857A6 0%, rgba(248, 87, 166, 0) 58%),
    radial-gradient(115% 95% at 92% 82%, #FDBE45 0%, rgba(253, 190, 69, 0) 55%),
    linear-gradient(128deg, #F857A6 0%, #FF5C3C 42%, #FF8A3D 68%, #FDBE45 100%);
  --panel: #FFE8D6;
  --fg: #6B1233;
  --on-fg: #FFF7EF;
  --fg-soft: #6B123322;
  --fg-soft-2: #6B123355;
  --danger: #C21B2F;

  --font: 'Avenir Next', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --heading-spacing: 1px;

  --radius: 26px;
  --radius-sm: 14px;
  --card-border: 1px solid rgba(107, 18, 51, 0.10);
  --card-shadow: 0 18px 40px rgba(122, 30, 10, 0.22);
  --input-border: 2px solid rgba(107, 18, 51, 0.22);
  --btn-border: 2px solid var(--fg);
  --btn-shadow: 0 8px 18px rgba(107, 18, 51, 0.22);
}

/* The wordmark is white, so it needs the gradient behind it — no extra
   backdrop, just a little room. */
.logo {
  width: min(420px, 82vw);
  margin-bottom: 10px;
  filter: drop-shadow(0 6px 18px rgba(122, 30, 10, 0.18));
}

.tagline {
  color: #FFF3E2;
  text-shadow: 0 2px 10px rgba(122, 30, 10, 0.25);
}

/* Softer, less shouty headings than KTC's all-caps. */
h1 { letter-spacing: 0.5px; }

.progress-fill {
  background-color: var(--fg);
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.22) 25%, transparent 25%,
    transparent 50%, rgba(255, 255, 255, 0.22) 50%,
    rgba(255, 255, 255, 0.22) 75%, transparent 75%, transparent
  );
}

footer {
  color: #FFF3E2;
  opacity: 0.85;
}