/**
 * FitFlex reference design tokens (style only)
 * Source demo: https://fitflex-react.vercel.app/
 * ThemeForest item: 62385383 (preview wrapper Cloudflare-blocked; demo used)
 *
 * NOT ENQUEUED YET — awaiting approval before Step 3 rebuild.
 */

:root {
  /* —— Brand / surfaces —— */
  --ffx-color-bg: #222222;
  --ffx-color-bg-elevated: rgba(255, 255, 255, 0.04);
  --ffx-color-bg-glass: rgba(255, 255, 255, 0.03);
  --ffx-color-black: #000000;
  --ffx-color-surface-soft: rgba(255, 255, 255, 0.06);

  /* —— Text —— */
  --ffx-color-heading: #ffffff;
  --ffx-color-body: rgba(255, 255, 255, 0.6); /* #fff9 */
  --ffx-color-muted: rgba(255, 255, 255, 0.6);
  --ffx-color-on-accent: #222222;

  /* —— Accent (brand yellow — Fitness First, not FitFlex lime) —— */
  --ffx-color-accent: #ffd700;
  --ffx-color-accent-hover: #e6c200;

  /* —— Borders —— */
  --ffx-color-border: rgba(255, 255, 255, 0.1); /* #ffffff1a */
  --ffx-color-border-strong: rgba(255, 255, 255, 0.6);

  /* —— Typography —— */
  --ffx-font-heading: "Sora", sans-serif;
  --ffx-font-body: "Roboto", sans-serif;

  --ffx-fs-body: 16px;
  --ffx-lh-body: 1.62; /* ~25.92/16 */
  --ffx-fs-p: 18px;
  --ffx-lh-p: 28px;

  --ffx-fs-h1: 56px;
  --ffx-fw-h1: 700;
  --ffx-lh-h1: 1.14; /* ~82/72 */

  --ffx-fs-h2: 42px;
  --ffx-fw-h2: 600;
  --ffx-lh-h2: 1.185; /* ~64/54 */

  --ffx-fs-h3: 20px;
  --ffx-fw-h3: 600;
  --ffx-lh-h3: 1.33;

  --ffx-fs-stat: 34px;
  --ffx-fw-stat: 700;

  --ffx-fs-btn: 16px;
  --ffx-fw-btn: 600;
  --ffx-ls-btn: 0.015em; /* 0.24px @ 16 */

  /* —— Layout —— */
  --ffx-container-max: 1264px;
  --ffx-container-pad: 12px;
  --ffx-header-height: 100px;
  --ffx-header-height-md: 80px;
  --ffx-header-z: 999;
  --ffx-gutter: 24px;
  --ffx-section-gap: 0px; /* sections often self-pad via inner wrappers */

  /* —— Radius / shadow (FitFlex is sharp) —— */
  --ffx-radius: 0px;
  --ffx-shadow: none;

  /* —— Buttons —— */
  --ffx-btn-pad-y: 11px;
  --ffx-btn-pad-x: 32px;
  --ffx-btn-border-width: 1px;
  --ffx-btn-transition: 0.3s;

  /* —— Cards —— */
  --ffx-card-bg: rgba(255, 255, 255, 0.04);
  --ffx-card-info-pad: 35px 20px;
  --ffx-card-border: 1px solid var(--ffx-color-border-strong);

  /* —— Hero stats strip —— */
  --ffx-hero-stats-bg: rgba(255, 255, 255, 0.03);
  --ffx-hero-stats-pad: 35px 40px;

  /* —— Motion —— */
  --ffx-ease: ease;
  --ffx-duration-fast: 0.2s;
  --ffx-duration: 0.3s;
  --ffx-duration-med: 0.4s;
  --ffx-duration-slow: 0.5s;
  --ffx-anim-translate: translateAnim;
  --ffx-anim-border: border-scale;
  --ffx-anim-rotate: rotateAnim;

  /* —— Breakpoints (Bootstrap 5 aligned) —— */
  --ffx-bp-sm: 576px;
  --ffx-bp-md: 768px;
  --ffx-bp-lg: 992px;
  --ffx-bp-xl: 1200px;
  --ffx-bp-xxl: 1400px;
}

/* Responsive type scale (measured) */
@media (max-width: 1024px) {
  :root {
    --ffx-fs-h1: 48px;
    --ffx-header-height: var(--ffx-header-height-md);
  }
}

@media (max-width: 575.98px) {
  :root {
    --ffx-fs-h1: 34px;
    --ffx-fs-h2: 30px;
    --ffx-header-height: 80px;
  }
}