/* =========================================================================
   Ironwood Gym — design tokens
   Foundations: color, type, spacing, radius, shadow, plus semantic element
   styles. Drop a single <link rel="stylesheet" href="styles/tokens.css"> onto
   any page to inherit the full system.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* -------- Brand & accent -------------------------------------------- */
  --primary: #0a0a0a;
  --on-primary: #ffffff;
  --brand-green: #00d4a4;
  --brand-green-deep: #00b48a;
  --brand-green-soft: #7cebcb;
  --brand-tag: #3772cf;
  --brand-warn: #c37d0d;
  --brand-annotate: #1ba673;
  --brand-error: #d45656;
  --brand-cursor: #888888;
  --testimonial-orange: #f55a3c;
  --testimonial-orange-deep: #cc3a1f;

  /* -------- Atmospheric hero gradients -------------------------------- */
  --hero-sky-from: #87a8c8;
  --hero-sky-to:   #f5e9d8;
  --hero-dark-from: #1a3d4a;
  --hero-dark-to:   #2d5a4f;

  /* -------- Surfaces --------------------------------------------------- */
  --canvas: #ffffff;
  --canvas-dark: #0a0a0a;
  --surface: #f7f7f7;
  --surface-soft: #fafafa;
  --surface-code: #1c1c1e;
  --hairline: #e5e5e5;
  --hairline-soft: #ededed;
  --hairline-dark: #1f1f1f;

  /* -------- Text ------------------------------------------------------- */
  --ink: #0a0a0a;
  --charcoal: #1c1c1e;
  --slate: #3a3a3c;
  --steel: #5a5a5c;
  --stone: #888888;
  --muted: #a8a8aa;
  --on-dark: #ffffff;
  --on-dark-muted: #b3b3b3;

  /* -------- Type families --------------------------------------------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* -------- Spacing scale (4 base) ------------------------------------ */
  --space-xxs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  20px;
  --space-xl:  24px;
  --space-xxl: 32px;
  --space-xxxl: 40px;
  --space-section-sm: 48px;
  --space-section: 64px;
  --space-section-lg: 96px;
  --space-hero: 120px;

  /* -------- Radius ----------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-xxl: 24px;
  --r-full: 9999px;

  /* -------- Shadow / elevation ---------------------------------------- */
  --shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --shadow-2: 0 4px 12px 0 rgba(0, 0, 0, 0.08);
  --shadow-mockup: 0 24px 48px -8px rgba(0, 0, 0, 0.12);
  --shadow-featured: 0 8px 24px rgba(0, 212, 164, 0.08);

  /* -------- Motion ----------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 200ms;
}

/* =========================================================================
   Base reset + body
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.50;
  color: var(--ink);
  background: var(--canvas);
}

/* =========================================================================
   Typography — element-level semantics
   ========================================================================= */
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-sans); color: var(--ink); }

.t-hero      { font-size: 72px; font-weight: 600; line-height: 1.05; letter-spacing: -2px;   }
.t-display   { font-size: 56px; font-weight: 600; line-height: 1.10; letter-spacing: -1.5px; }
.t-h1, h1    { font-size: 48px; font-weight: 600; line-height: 1.10; letter-spacing: -1px;   }
.t-h2, h2    { font-size: 36px; font-weight: 600; line-height: 1.20; letter-spacing: -0.5px; }
.t-h3, h3    { font-size: 28px; font-weight: 600; line-height: 1.25; }
.t-h4, h4    { font-size: 22px; font-weight: 600; line-height: 1.30; }
.t-h5, h5    { font-size: 18px; font-weight: 600; line-height: 1.40; }
.t-subtitle  { font-size: 18px; font-weight: 400; line-height: 1.50; color: var(--steel); }
.t-body      { font-size: 16px; font-weight: 400; line-height: 1.50; }
.t-body-m    { font-size: 16px; font-weight: 500; line-height: 1.50; }
.t-sm        { font-size: 14px; font-weight: 400; line-height: 1.50; }
.t-sm-m      { font-size: 14px; font-weight: 500; line-height: 1.50; }
.t-caption   { font-size: 13px; font-weight: 400; line-height: 1.40; color: var(--steel); }
.t-caption-b { font-size: 13px; font-weight: 600; line-height: 1.40; }
.t-micro     { font-size: 12px; font-weight: 500; line-height: 1.40; }
.t-micro-up  { font-size: 11px; font-weight: 600; line-height: 1.40; letter-spacing: 0.5px; text-transform: uppercase; color: var(--steel); }
.t-button    { font-size: 14px; font-weight: 500; line-height: 1.30; }

code, pre, .t-code, .t-code-sm, .t-code-inline { font-family: var(--font-mono); }
.t-code      { font-size: 14px; font-weight: 400; line-height: 1.50; }
.t-code-sm   { font-size: 13px; font-weight: 400; line-height: 1.40; }
.t-code-inline {
  font-size: 13px; font-weight: 500; line-height: 1.30;
  background: var(--surface); color: var(--charcoal);
  border: 1px solid var(--hairline); border-radius: var(--r-xs);
  padding: 2px 6px;
}

p { margin: 0 0 var(--space-md) 0; }
a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--hairline); }
a:hover { text-decoration-color: currentColor; }

/* =========================================================================
   Buttons
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  font-family: var(--font-sans); font-size: 14px; font-weight: 500; line-height: 1.30;
  padding: 10px 20px; border-radius: var(--r-full);
  border: 1px solid transparent; cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn:hover    { transform: translateY(-1px); }
.btn:active   { transform: translateY(0); }
.btn-primary    { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover  { background: #1c1c1e; }
.btn-primary:active { background: var(--charcoal); }
.btn-primary[disabled] { background: var(--hairline); color: var(--muted); cursor: not-allowed; }

.btn-accent     { background: var(--brand-green); color: var(--primary); }
.btn-accent:hover  { background: #1ce0b3; }
.btn-accent:active { background: var(--brand-green-deep); }

.btn-on-dark    { background: var(--on-dark); color: var(--primary); }
.btn-secondary  { background: transparent; color: var(--ink); border-color: var(--hairline); }
.btn-secondary:hover { background: var(--surface); border-color: var(--ink); }
.btn-ghost      { background: transparent; color: var(--ink); padding: 8px 12px; border-radius: var(--r-md); }
.btn-link       { background: transparent; color: var(--ink); padding: 0; border: 0; font-size: 14px; font-weight: 500; }

.btn-icon {
  width: 32px; height: 32px; padding: 0;
  border-radius: var(--r-full); border: 1px solid var(--hairline);
  background: var(--canvas); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
}

/* Subtle arrow translation on hover for any .btn that contains an .arrow svg */
.btn .arrow { transition: transform var(--dur-base) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* =========================================================================
   Cards
   ========================================================================= */
.card {
  background: var(--canvas); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: var(--space-xl);
}
.card-feature   { background: var(--surface); border: 0; padding: var(--space-xxl); border-radius: var(--r-lg); }
.card-pricing   { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--space-xxl); }
.card-pricing--featured {
  border: 2px solid var(--brand-green);
  box-shadow: var(--shadow-featured);
}
.card-testimonial-orange {
  background: var(--testimonial-orange); color: var(--on-dark);
  border-radius: var(--r-lg); padding: var(--space-section);
}

/* =========================================================================
   Inputs
   ========================================================================= */
.input {
  display: block; width: 100%; height: 40px;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-sans); font-size: 16px; line-height: 1.50;
  color: var(--ink); background: var(--canvas);
  border: 1px solid var(--hairline); border-radius: var(--r-md);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.input:focus { outline: none; border: 2px solid var(--brand-green); }
textarea.input { font-family: inherit; }

.search-pill {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  height: 36px; padding: 0 var(--space-md);
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-md); color: var(--steel); font-size: 14px;
}

/* =========================================================================
   Badges
   ========================================================================= */
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--r-full); font-size: 13px; font-weight: 600; line-height: 1.40; }
.badge-discount { background: var(--brand-green); color: var(--primary); }
.badge-required { background: var(--brand-error); color: var(--on-dark); font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; padding: 2px 6px; border-radius: var(--r-sm); }
.badge-type     { background: var(--surface); color: var(--steel); font-family: var(--font-mono); font-size: 13px; font-weight: 400; padding: 2px 6px; border-radius: var(--r-sm); }
.badge-tag      { background: rgba(55, 114, 207, 0.15); color: var(--brand-tag); padding: 2px 8px; border-radius: var(--r-sm); }

/* =========================================================================
   Pill tabs
   ========================================================================= */
.pill-tab { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: var(--r-full); border: 1px solid var(--hairline); background: var(--canvas); color: var(--steel); font-size: 14px; font-weight: 500; cursor: pointer; }
.pill-tab[aria-selected="true"], .pill-tab.active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

/* =========================================================================
   Hero bands
   ========================================================================= */
.hero-sky  { background: linear-gradient(180deg, var(--hero-sky-from) 0%, var(--hero-sky-to) 100%); padding: var(--space-hero) var(--space-xxl); }
.hero-dark { background: linear-gradient(135deg, var(--hero-dark-from) 0%, var(--hero-dark-to) 100%); color: var(--on-dark); padding: var(--space-hero) var(--space-xxl); }

.promo-banner { background: var(--canvas-dark); color: var(--on-dark); padding: var(--space-sm) var(--space-md); font-size: 14px; font-weight: 500; text-align: center; }

/* =========================================================================
   Hairlines + utility
   ========================================================================= */
.divider { height: 1px; background: var(--hairline); border: 0; }
.divider-soft { height: 1px; background: var(--hairline-soft); border: 0; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 var(--space-xxl); }

.checkmark { color: var(--brand-green); }