/* ============================================
   IRON FORGE FITNESS — Design Tokens
   ============================================ */

:root {
  /* === Colors (60-30-10 Rule) === */
  /* 60% — Primary Background */
  --color-white: #FFFFFF;
  --color-light-gray: #F8FAFC;

  /* 30% — Secondary */
  --color-navy: #0F172A;
  --color-dark: #111827;

  /* 10% — Accent */
  --color-red: #EF4444;
  --color-red-hover: #DC2626;
  --color-red-glow: rgba(239, 68, 68, 0.15);

  /* Supporting */
  --color-gray: #64748B;
  --color-gray-light: #94A3B8;
  --color-border: #E2E8F0;
  --color-gold: #FBBF24;

  /* === Typography === */
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Type Scale */
  --text-hero: 72px;
  --text-section: 48px;
  --text-card: 24px;
  --text-body: 18px;
  --text-small: 14px;
  --text-xs: 13px;

  /* === Layout === */
  --max-width: 1400px;
  --section-padding: 120px;
  --container-desktop: 32px;
  --container-tablet: 24px;
  --container-mobile: 16px;
  --navbar-height: 90px;

  /* === Effects === */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 24px;
  --radius-lg: 32px;
  --radius-full: 100px;

  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.05);
  --shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.1);
  --shadow-glow-red: 0 10px 30px rgba(239, 68, 68, 0.35);

  --transition: 0.3s ease;
  --animation-duration: 0.6s;
}