/* ============================================================
   68 Sport Field — Design System
   Apple-inspired palette & typography
   ============================================================ */

/* ── Google Fonts — Inter ────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── CSS Custom Properties ───────────────────────────────────── */
:root {
  /* Background */
  --color-bg-dark:        #000000;
  --color-bg-light:       #f5f5f7;

  /* Text */
  --color-text-primary:   #1d1d1f;
  --color-text-secondary: rgba(0, 0, 0, 0.80);
  --color-text-tertiary:  rgba(0, 0, 0, 0.48);
  --color-text-on-dark:   #ffffff;

  /* Accent */
  --color-accent-blue:    #0071e3;
  --color-link-light:     #0066cc;
  --color-link-dark:      #2997ff;

  /* Surfaces */
  --color-surface-dark-1: #272729;
  --color-surface-dark-2: #262628;

  /* Badge colors */
  --color-badge-sale:     #e30000;
  --color-badge-new:      #2d8a2d;
  --color-badge-preorder: #0071e3;
  --color-badge-trending: #e36d00;

  /* Shadows */
  --shadow-card:          0 4px 20px rgba(0, 0, 0, 0.12);
  --shadow-card-hover:    0 8px 30px rgba(0, 0, 0, 0.18);

  /* Nav */
  --nav-height:           48px;
  --nav-bg:               rgba(0, 0, 0, 0.80);

  /* Layout */
  --content-max-width:    1070px;
}

/* ── Base Reset ──────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.47;
  color: var(--color-text-primary);
  background: var(--color-bg-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ── Typography Scale ────────────────────────────────────────── */

/* Hero headline — 56px */
.cs-headline-xl {
  font-size: 56px;
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -0.28px;
}

/* Section heading — 40px */
.cs-headline-lg {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.10;
  letter-spacing: -0.22px;
}

/* Section heading mobile — 28px */
.cs-headline-md {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.16px;
}

/* Body — 17px */
.cs-body {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.47;
  letter-spacing: -0.374px;
}

/* Caption — 14px */
.cs-caption {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.29;
  letter-spacing: -0.224px;
}

/* Micro — 12px */
.cs-micro {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.33;
  letter-spacing: -0.12px;
}

/* ── Utility: section rhythm ─────────────────────────────────── */
.cs-section-dark  { background: var(--color-bg-dark); }
.cs-section-light { background: var(--color-bg-light); }

.cs-container {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: 24px;
}

/* ── Pill buttons (CTA) ──────────────────────────────────────── */
.cs-btn-pill {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 980px;
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  transition: opacity 0.2s ease;
  cursor: pointer;
  border: none;
}
.cs-btn-pill:hover { opacity: 0.85; }

.cs-btn-pill-blue {
  background: var(--color-accent-blue);
  color: #ffffff;
}

.cs-btn-pill-dark {
  background: #1d1d1f;
  color: #ffffff;
  font-size: 14px;
  padding: 12px 24px;
}
.cs-btn-pill-dark:hover { background: #3a3a3c; color: #ffffff; }

/* ── Responsive breakpoints ──────────────────────────────────── */
/* Desktop: >= 1070px | Tablet: 768-1069px | Mobile: < 768px | Small: < 360px */