/*
 * theme.css — FitPulse. Warm bone ground, deep night-navy ink, one coral "pulse"
 * red as the brand. Athletic and poster-like, closer to a Nike Run Club print
 * than a SaaS dashboard: condensed display caps (Anton) over a friendly
 * grotesk body (Figtree), figures in JetBrains Mono.
 */

:root {
  --canvas: #f5f1ea;
  --surface: #fffdf9;
  --surface-2: #ece5da;
  --border: #ddd4c6;
  --border-strong: #8e8271;
  --ink: #161a2b;
  --muted: #5e5a55;
  --accent: #d63a25;
  --accent-hover: #bc2f1c;
  --accent-ink: #ffffff;
  --accent-text: #b42a17;
  --accent-strong: #9a2414;
  --accent-soft: #fbe1da;
  --accent-border: #f0a898;
  --success: #1f7a45;
  --success-ink: #ffffff;
  --success-soft: #dcefe2;
  --success-strong: #17633a;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f6e7d6;
  --warning-strong: #92420a;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f8e0dc;
  --danger-strong: #9f1717;
  --chart-1: #d63a25;
  --chart-2: #161a2b;
  --chart-3: #8e8271;
  --chart-4: #1f7a45;
  --chart-5: #2f5d9c;
  --chart-6: #b45309;

  --font-display: "Anton", "Impact", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 400;
  --display-tracking: 0.005em;
  --eyebrow-tracking: 0.14em;

  --radius-btn: 999px;
  --radius-input: 0.875rem;
  --radius-card: 1.5rem;
  --btn-weight: 700;
  --shadow-card: none;

  --x-band-bg: #161a2b;
  --x-band-ink: #f5f1ea;
  --x-band-muted: #aaa7b6;
  --x-band-accent: #ff6a4d;
}

html[data-theme="dark"] {
  --canvas: #10131f;
  --surface: #181c2b;
  --surface-2: #20253a;
  --border: #2c3248;
  --border-strong: #5a6180;
  --ink: #f3eee6;
  --muted: #a6a3a0;
  --accent: #ff6a4d;
  --accent-hover: #ff8468;
  --accent-ink: #10131f;
  --accent-text: #ff8a70;
  --accent-strong: #ffb4a3;
  --accent-soft: #3a1e1c;
  --accent-border: #6b2e25;
  --success: #3fb06f;
  --success-ink: #10131f;
  --success-soft: #16301f;
  --success-strong: #7fd3a0;
  --warning: #e08a3c;
  --warning-ink: #10131f;
  --warning-soft: #33241a;
  --warning-strong: #f0b27a;
  --danger: #f05a4f;
  --danger-ink: #10131f;
  --danger-soft: #3a1a1c;
  --danger-strong: #ff9d94;
  --chart-1: #ff6a4d;
  --chart-2: #f3eee6;
  --chart-3: #a6a3a0;
  --chart-4: #3fb06f;
  --chart-5: #6f9ee0;
  --chart-6: #e08a3c;

  --x-band-bg: #ede6da;
  --x-band-ink: #161a2b;
  --x-band-muted: #5e5a55;
  --x-band-accent: #b42a17;
}

/*
 * app.css — FitPulse's own pieces: the display type, the heartbeat line that
 * draws itself across the hero (the page's ONE moving moment), the dark
 * statement band and its sample-week bars.
 */

body { font-family: var(--font-body); }

.display {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  text-transform: uppercase;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
}

/* ---- The heartbeat ------------------------------------------------------ */
.pulse-line { display: block; width: 100%; height: auto; overflow: visible; }
.pulse-line path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: pulse-draw 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}
.pulse-dot {
  fill: var(--accent);
  transform-box: fill-box;
  transform-origin: center;
  animation: pulse-beat 1.1s ease-in-out 1.9s infinite;
}
@keyframes pulse-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pulse-beat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.7); }
  28% { transform: scale(1); }
  42% { transform: scale(1.35); }
  56% { transform: scale(1); }
}
html.reduced-motion .pulse-line path,
html.reduced-motion .pulse-dot { animation: none; }

/* ---- The statement band -------------------------------------------------- */
.band { background: var(--x-band-bg); color: var(--x-band-ink); }
.band-muted { color: var(--x-band-muted); }
.band-accent { color: var(--x-band-accent); }
.band-rule { border-color: color-mix(in srgb, var(--x-band-ink) 18%, transparent); }

.week-bar { border-radius: 0.5rem; }
.week-push { background: var(--x-band-accent); }
.week-steady { background: color-mix(in srgb, var(--x-band-ink) 38%, transparent); }
.week-rest { border: 2px dashed var(--x-band-muted); background: transparent; }
.week-key { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 0.2rem; }

/* ---- The sign-up device -------------------------------------------------- */
.signup-card { border-width: 2px; border-color: var(--ink); }
.figure { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }