/* ================================================
   Typography System
   Inter font with Apple-style hierarchy
   ================================================ */

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

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
}

/* ========== Headings ========== */

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
}

.hero-title {
  font-size: var(--font-size-hero);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
  line-height: 1.05;
}

h1, .h1 {
  font-size: var(--font-size-h1);
  letter-spacing: -0.01em;
}

h2, .h2 {
  font-size: var(--font-size-h2);
  letter-spacing: -0.01em;
}

h3, .h3 {
  font-size: var(--font-size-h3);
}

h4, .h4 {
  font-size: var(--font-size-h4);
}

/* ========== Body Text ========== */

.text-lg {
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-relaxed);
}

.text-base {
  font-size: var(--font-size-body);
}

.text-sm {
  font-size: var(--font-size-body-sm);
}

.text-xs {
  font-size: var(--font-size-caption);
}

/* ========== Font Weights ========== */

.font-regular {
  font-weight: var(--font-weight-regular);
}

.font-medium {
  font-weight: var(--font-weight-medium);
}

.font-semibold {
  font-weight: var(--font-weight-semibold);
}

.font-bold {
  font-weight: var(--font-weight-bold);
}

/* ========== Text Colors ========== */

.text-primary {
  color: var(--color-text-primary);
}

.text-secondary {
  color: var(--color-text-secondary);
}

.text-tertiary {
  color: var(--color-text-tertiary);
}

.text-inverse {
  color: var(--color-text-inverse);
}

/* ========== Accent Colors ========== */

.text-accent-blue {
  color: var(--color-accent-blue);
}

.text-accent-cyan {
  color: var(--color-accent-cyan);
}

.text-accent-purple {
  color: var(--color-accent-purple);
}

.text-accent-orange {
  color: var(--color-accent-orange);
}

/* ========== Text Alignment ========== */

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

/* ========== Line Height ========== */

.leading-tight {
  line-height: var(--line-height-tight);
}

.leading-normal {
  line-height: var(--line-height-normal);
}

.leading-relaxed {
  line-height: var(--line-height-relaxed);
}

/* ========== Links ========== */

a {
  color: var(--color-accent-blue);
  text-decoration: none;
  transition: opacity var(--duration-normal) var(--ease-in-out);
}

a:hover {
  opacity: 0.7;
}

a:focus-visible {
  outline: 2px solid var(--color-accent-blue);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

/* ========== Emphasis ========== */

strong, b {
  font-weight: var(--font-weight-semibold);
}

em, i {
  font-style: italic;
}

/* ========== Code ========== */

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background-color: var(--color-bg-tertiary);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

pre {
  font-family: var(--font-mono);
  font-size: var(--font-size-body-sm);
  background-color: var(--color-bg-secondary);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

/* ========== Special Text Effects ========== */

.gradient-text {
  background: linear-gradient(135deg, var(--color-accent-blue), var(--color-accent-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-shadow {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}