/* RepMax brand tokens.
 *
 * Mirrored from the Flutter app so the site and the product cannot drift:
 *   lib/themes/app_theme.dart   — colors, gradient, surfaces
 *   lib/widgets/EndOfWorkout/WorkoutOverviewCard.dart — muscle group colors
 *   pubspec.yaml                — font families
 *
 * If a value changes in the app, change it here too. Nothing else in the site
 * should hard-code a color.
 */

:root {
  /* Core surfaces — app scaffold is rgb(15,15,15) */
  --bg:            #0F0F0F;
  --bg-deep:       #0D0D0D;
  --surface:       #1A1A1A;
  --surface-raised:#222222;
  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  /* Accent — app primaryColor is rgb(232,80,38) */
  --accent:        #E85026;
  --accent-hot:    #F83600;   /* paywall / focused inputs */
  --accent-from:   #F26431;   /* AppTheme.accentGradient start */
  --accent-to:     #E63F29;   /* AppTheme.accentGradient end   */
  --accent-grad:   linear-gradient(135deg, var(--accent-from), var(--accent-to));

  /* Text-safe accent. --accent (#E85026) measures 4.05:1 on --surface, which
   * passes for icons and borders (3:1) but fails AA for text (4.5:1). This is
   * the same hue lightened to 6.7:1 on --surface, 7.4:1 on --bg. Use it for any
   * accent-colored *text*; use --accent for everything else. */
  --accent-text:   #FF7A45;

  /* Type */
  --text:          #FFFFFF;
  --text-muted:    rgba(255, 255, 255, 0.62);
  --text-faint:    rgba(255, 255, 255, 0.50);  /* 5.3:1 on --bg */

  /* Macro colors, used if the site ever shows nutrition UI */
  --protein:       #7C4DFF;
  --carbs:         #FFC107;
  --fat:           #FF6F91;

  /* Fonts — Outfit, Bungee and Anton are all on Google Fonts, so the web
   * matches the app exactly with no font files to copy. */
  --font-body:     'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display:  'Anton', 'Outfit', system-ui, sans-serif;
  --font-brand:    'Bungee', 'Anton', system-ui, sans-serif;

  /* Derived accent washes — tints of --accent, kept here so nothing else in
   * the site hard-codes an rgba(). */
  --accent-wash:   rgba(232, 80, 38, 0.12);
  --accent-edge:   rgba(232, 80, 38, 0.34);
  --accent-glow:   rgba(232, 80, 38, 0.22);

  /* Neutral fills layered over --bg */
  --fill-subtle:   rgba(255, 255, 255, 0.035);
  --fill-soft:     rgba(255, 255, 255, 0.06);
  --scrim:         rgba(15, 15, 15, 0.82);   /* --bg at opacity, for blurred bars */
  --shadow-lift:   0 18px 44px rgba(0, 0, 0, 0.55);

  /* Focus ring — must stay visible on every surface */
  --focus:         #F83600;

  --radius:        18px;
  --radius-lg:     26px;
  --maxw:          1080px;
  --gutter:        24px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* Lets the hero glow and the screenshot strip bleed past the .wrap gutters
   * without creating a horizontal scrollbar. `clip` rather than `hidden`
   * because `hidden` would create a scroll container and break the sticky
   * header. */
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 760px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 999px;
  background: var(--accent-grad);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: filter 140ms ease, transform 140ms ease;
}
.btn:hover { text-decoration: none; filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }

.btn-ghost {
  background: var(--fill-subtle);
  border: 1px solid var(--border-strong);
  color: var(--text);
}
.btn-ghost:hover { background: var(--fill-soft); filter: none; }

.btn-block { display: flex; width: 100%; }

/* Focus: visible on dark surfaces, never removed. */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text);
  font-weight: 600;
}
.skip-link:focus { left: 16px; text-decoration: none; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
}

@media (max-width: 640px) {
  body { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}