/* =====================================================================
   All Time Fitness — Foundations
   Colors + Typography variables and base styles.
   Drop into any HTML file with:
     <link rel="stylesheet" href="colors_and_type.css">
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  /* --- Brand colors --- */
  --primary:        #a9c232;
  --primary-dark:   #8aa028;
  --primary-glow:   rgba(169, 194, 50, 0.12);
  --primary-tint:   rgba(169, 194, 50, 0.10);
  --primary-tint-2: rgba(169, 194, 50, 0.30);

  /* --- Surfaces --- */
  --bg:        #080808;
  --bg-olive:  #0f1a00;        /* used in 135deg gradients */
  --surface:   #101010;
  --surface-2: #1c1c1c;
  --surface-3: #0d0d0d;        /* alternating section bg */

  /* --- Text --- */
  --text:    #f5f5f5;
  --muted:   #777777;
  --muted-2: #555555;
  --muted-3: #444444;

  /* --- Borders & dividers --- */
  --border:        rgba(169, 194, 50, 0.18);
  --border-strong: rgba(169, 194, 50, 0.50);
  --border-faint:  rgba(169, 194, 50, 0.08);

  /* --- Glows (used in place of drop shadows) --- */
  --glow-sm: 0 0 12px rgba(169, 194, 50, 0.06);
  --glow-md: 0 0 24px rgba(169, 194, 50, 0.08);
  --glow-lg: 0 0 40px rgba(169, 194, 50, 0.25);
  --glow-text: 0 0 60px rgba(169, 194, 50, 0.4);

  /* --- Radii --- */
  --radius-xs: 3px;   /* badges */
  --radius-sm: 4px;   /* buttons, inputs */
  --radius-md: 8px;   /* cards, panels */
  --radius-pill: 9999px;

  /* --- Spacing scale (8pt) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 120px;

  /* --- Type families --- */
  --font-display:  'Bebas Neue', 'Oswald', 'Impact', sans-serif;
  --font-subhead:  'Oswald', 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body:     'DM Sans', 'Inter', system-ui, sans-serif;

  /* --- Easings --- */
  --ease-out-quart: cubic-bezier(.22, .61, .36, 1);
  --ease-snap:      cubic-bezier(.4, 0, .2, 1);

  /* --- Layout --- */
  --container: 1200px;
}

/* =====================================================================
   Base
   ===================================================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =====================================================================
   Semantic type
   ===================================================================== */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(58px, 9vw, 110px);
  line-height: 0.9;
  letter-spacing: 0.005em;
  color: var(--text);
  margin: 0 0 var(--space-5);
  text-transform: uppercase;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(42px, 5.5vw, 64px);
  line-height: 0.95;
  letter-spacing: 0.005em;
  color: var(--text);
  margin: 0 0 var(--space-5);
  text-transform: uppercase;
}

h3, .h3 {
  font-family: var(--font-subhead);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--text);
  margin: 0 0 var(--space-3);
  text-transform: uppercase;
}

h4, .h4 {
  font-family: var(--font-subhead);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
  color: var(--text);
  margin: 0 0 var(--space-2);
  text-transform: uppercase;
}

p, .body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 var(--space-4);
}

.lead {
  font-size: 18px;
  color: var(--muted);
  max-width: 52ch;
  line-height: 1.55;
}

/* eyebrow / section label */
.label,
.eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--primary);
  display: inline-block;
  margin: 0 0 var(--space-4);
}

/* small caps tag */
.tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--primary);
  background: var(--primary-tint);
  border-radius: var(--radius-xs);
  padding: 4px 8px;
}

/* The signature lime accent line — use for hero secondary line */
.lime {
  color: var(--primary);
  text-shadow: var(--glow-text);
}

.muted   { color: var(--muted); }
.muted-2 { color: var(--muted-2); }

/* Stat number — Bebas Neue inverted on lime background */
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  color: var(--primary);
}

/* Links */
a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.2s var(--ease-snap);
}
a:hover { color: var(--primary-dark); }

/* Selection */
::selection {
  background: var(--primary);
  color: #000;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #111; }
::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover { background: var(--primary-dark); }