/* ==========================================================================
   Design Tokens — derived from BrandGuidelines.md
   ========================================================================== */

:root {
  /* ---------- Colours (core palette) ---------- */
  --color-black: #0E0E0E;
  --color-off-white: #F5F5F5;
  --color-mid-grey: #A0A0A0;
  --color-light-grey: #E5E5E5;

  /* Accent — refined mid-dark gray, used for the primary trial CTA only */
  --color-accent: #4A4A4A;
  --color-accent-hover: #2A2A2A;

  /* Semantic aliases */
  --bg-default: var(--color-off-white);
  --bg-surface: #FFFFFF;
  --bg-inverse: var(--color-black);
  --text-default: var(--color-black);
  --text-muted: var(--color-mid-grey);
  --text-inverse: var(--color-off-white);
  --border-subtle: var(--color-light-grey);

  /* ---------- Typography ---------- */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Barlow Condensed', 'Inter', -apple-system, sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Heading specs (brand guide §2 — condensed display for gym aesthetic) */
  --h1-size: clamp(3rem, 6vw + 1rem, 6rem);
  --h1-weight: 700;
  --h1-tracking: 0.01em;
  --h1-leading: 0.95;

  --h2-size: clamp(2.25rem, 4vw + 1rem, 3.75rem);
  --h2-weight: 700;
  --h2-tracking: 0.01em;
  --h2-leading: 1;

  --h3-size: clamp(1.375rem, 1.8vw + 0.75rem, 1.875rem);
  --h3-weight: 600;
  --h3-tracking: 0.02em;
  --h3-leading: 1.15;

  --body-size: 1.0625rem;     /* 17px — within 16–18px range */
  --body-weight: var(--font-weight-regular);
  --body-leading: 1.6;
  --body-tracking: 0.01em;

  --label-weight: var(--font-weight-medium);
  --label-tracking: 0.03em;

  /* ---------- Spacing (strict scale: 8/16/24/32/48/64/80) ---------- */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;

  /* Section vertical padding (brand guide §4) */
  --section-py-sm: var(--spacing-48);
  --section-py:    var(--spacing-64);
  --section-py-lg: var(--spacing-80);

  /* ---------- Layout widths ---------- */
  --max-width-container: 1200px;
  --max-width-text: 700px;

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --transition-fast: 180ms var(--ease-standard);
  --transition-normal: 320ms var(--ease-standard);
  --transition-slow: 640ms var(--ease-standard);

  /* ---------- Layout / chrome ---------- */
  --nav-height: 72px;
  --border-hairline: 1px solid var(--border-subtle);
  --focus-ring: 0 0 0 2px var(--color-black);

  /* ---------- Z-index ---------- */
  --z-nav: 50;
  --z-overlay: 90;
  --z-modal: 100;
}

@media (max-width: 640px) {
  :root { --nav-height: 64px; }
}

/* Compact vertical rhythm on mobile.
   Halves the inter-section padding so pages feel tighter on small screens
   while preserving the breathing room on tablet/desktop. Applies to every
   .section, .section--sm and .section--lg site-wide because they consume
   these variables. */
@media (max-width: 720px) {
  :root {
    --section-py-sm: var(--spacing-24);   /* 48 → 24 */
    --section-py:    var(--spacing-32);   /* 64 → 32 */
    --section-py-lg: var(--spacing-40, 2.5rem); /* 80 → 40 (uses fallback if --spacing-40 not defined) */
  }
}