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

:root {
  /* Colors */
  --bg: #161618;
  --card: #222224;
  --surface: #2C2C2E;
  --accent: #FF6B35;
  --red: #FF3B30;
  --green: #34C759;
  --yellow: #FFCC00;
  --text: #F2F2F7;
  --text-muted: #8E8E93;
  --divider: #38383A;

  /* Border Radius */
  --radius: 16px;
  --radius-md: 14px;
  --radius-sm: 12px;
  --radius-xs: 10px;
  --radius-pill: 20px;

  /* Sizing */
  --btn-height: 54px;

  /* Font Family */
  --font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Typography Utility Classes */
.headline-lg {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text);
  line-height: 1.2;
}

.headline-md {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.title-lg {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}

.body-lg {
  font-size: 15px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.5;
}

.body-md {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.5;
}

.label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  text-transform: uppercase;
  line-height: 1.4;
}