/* =========================================================
   gym.com — Colors & Type
   Pure-color philosophy: white is white, black is near-black.
   Light + Dark themes. Sharp corners. Industrial precision.
   ========================================================= */

/* ---------- Fonts ----------
   Display + Body: Inter Tight (clean industrial sans, tight tracking)
   Mono accents:   JetBrains Mono (technical, gym.com tagging, metadata)

   Loaded from Google Fonts CDN. Local files in fonts/ as fallback.
*/
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800;900&family=Outfit:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---------- Pure neutrals ---------- */
  --pure-white: #FFFFFF;
  --pure-black: #0A0A0A;       /* near-black, not pitch */

  /* ---------- Neutral scale (warm-cool neutral, slightly desaturated) ---------- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FAFAFA;
  --neutral-100: #F4F4F5;
  --neutral-200: #E4E4E7;
  --neutral-300: #D4D4D8;
  --neutral-400: #A1A1AA;
  --neutral-500: #71717A;
  --neutral-600: #52525B;
  --neutral-700: #3F3F46;
  --neutral-800: #27272A;
  --neutral-900: #18181B;
  --neutral-950: #0A0A0A;

  /* ---------- Brand: Signal Blue ---------- */
  --signal-50:  #EBF2FF;
  --signal-100: #D6E4FF;
  --signal-200: #ADC9FF;
  --signal-300: #85AEFF;
  --signal-400: #5C92FF;
  --signal-500: #0066FF;       /* PRIMARY */
  --signal-600: #0052CC;
  --signal-700: #003D99;
  --signal-800: #002966;
  --signal-900: #001433;

  /* ---------- Semantic accents ---------- */
  --success-500: #00A862;      /* gym-open, claim-success */
  --success-600: #008A50;
  --warning-500: #FFB400;      /* limited spots, peak hours */
  --warning-600: #E59F00;
  --danger-500:  #E5283C;      /* full, closed, errors */
  --danger-600:  #C01F30;

  /* ---------- Supporting community palette ---------- */
  /* Used sparingly for category tags, neighborhood pins, class types. */
  --tag-strength: #E5283C;
  --tag-cardio:   #FF6B00;
  --tag-yoga:     #8B5CF6;
  --tag-recovery: #00A862;
  --tag-class:    #0066FF;

  /* ---------- LIGHT theme (default) ---------- */
  --bg:           var(--pure-white);
  --bg-subtle:    var(--neutral-50);
  --bg-muted:     var(--neutral-100);
  --bg-inverse:   var(--pure-black);

  --surface:      var(--pure-white);
  --surface-2:    var(--neutral-50);
  --surface-3:    var(--neutral-100);

  --fg:           var(--pure-black);
  --fg-2:         var(--neutral-700);
  --fg-3:         var(--neutral-500);
  --fg-muted:     var(--neutral-400);
  --fg-inverse:   var(--pure-white);

  --border:       var(--neutral-200);
  --border-strong:var(--neutral-300);
  --border-bold:  var(--pure-black);

  --primary:        var(--signal-500);
  --primary-hover:  var(--signal-600);
  --primary-press:  var(--signal-700);
  --primary-fg:     var(--pure-white);
  --primary-tint:   var(--signal-50);

  --focus-ring:   var(--signal-500);

  /* ---------- Type scale (industrial; tight tracking) ---------- */
  --font-display: 'Outfit', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body:    'Inter Tight', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Sizes — utilitarian, dense at top, generous at bottom */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --text-4xl:  48px;
  --text-5xl:  64px;
  --text-6xl:  88px;
  --text-7xl:  120px;

  /* Line heights */
  --lh-tight:  1.0;
  --lh-snug:   1.15;
  --lh-base:   1.5;
  --lh-loose:  1.7;

  /* Letter-spacing — industrial: tight on display, wide on labels */
  --tracking-display: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-label:   0.08em;   /* for ALL-CAPS metadata, mono tags */

  /* Weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;
  --weight-black:   900;

  /* ---------- Spacing (4px base) ---------- */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* ---------- Radii — softly rounded ---------- */
  --radius-0:    6px;          /* default everything */
  --radius-1:    8px;          /* cards, surfaces */
  --radius-2:    10px;         /* larger surfaces, modals */
  --radius-pill: 9999px;       /* avatars, dot indicators, full pills */

  /* ---------- Shadows — minimal, mostly borders do the work ---------- */
  --shadow-sm:  0 1px 0 0 rgba(10,10,10,0.06);
  --shadow-md:  0 2px 8px -2px rgba(10,10,10,0.08), 0 1px 0 0 rgba(10,10,10,0.04);
  --shadow-lg:  0 12px 32px -8px rgba(10,10,10,0.12);
  --shadow-pop: 0 24px 64px -16px rgba(10,10,10,0.18);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in:    cubic-bezier(0.7, 0.0, 0.84, 0.0);
  --ease-snap:  cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   320ms;

  /* ---------- Layout ---------- */
  --max-w:      1440px;
  --gutter:     24px;
  --header-h:   72px;
}

/* ---------- DARK theme ---------- */
[data-theme="dark"] {
  --bg:           var(--pure-black);
  --bg-subtle:    var(--neutral-950);
  --bg-muted:     var(--neutral-900);
  --bg-inverse:   var(--pure-white);

  --surface:      var(--pure-black);
  --surface-2:    var(--neutral-900);
  --surface-3:    var(--neutral-800);

  --fg:           var(--pure-white);
  --fg-2:         var(--neutral-300);
  --fg-3:         var(--neutral-400);
  --fg-muted:     var(--neutral-500);
  --fg-inverse:   var(--pure-black);

  --border:       var(--neutral-800);
  --border-strong:var(--neutral-700);
  --border-bold:  var(--pure-white);

  --primary:        var(--signal-500);
  --primary-hover:  var(--signal-400);
  --primary-press:  var(--signal-300);
  --primary-fg:     var(--pure-white);
  --primary-tint:   var(--signal-900);

  --shadow-sm:  0 1px 0 0 rgba(0,0,0,0.4);
  --shadow-md:  0 2px 8px -2px rgba(0,0,0,0.6), 0 1px 0 0 rgba(0,0,0,0.4);
  --shadow-lg:  0 12px 32px -8px rgba(0,0,0,0.7);
  --shadow-pop: 0 24px 64px -16px rgba(0,0,0,0.8);
}

/* =========================================================
   Semantic typography
   Use these classes (or equivalent CSS vars) in components.
   ========================================================= */

.h-display, h1.display {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, var(--text-7xl));
  font-weight: var(--weight-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg);
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semi);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semi);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--fg);
}

p, .p {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--lh-base);
  color: var(--fg-2);
}

.lead {
  font-size: var(--text-lg);
  line-height: var(--lh-base);
  color: var(--fg-2);
}

.small, small {
  font-size: var(--text-sm);
  color: var(--fg-3);
}

/* Mono — used for tags, metadata, ALL-CAPS labels, technical accents */
code, .mono, kbd {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-normal);
}

.label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-3);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--primary);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--primary-hover); }

::selection { background: var(--primary); color: var(--primary-fg); }