// Typography system
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  // Font sizes (Fibonacci-based scale)
  --text-xs: 0.618rem;   // ~10px (φ^-1)
  --text-sm: 0.75rem;    // 12px
  --text-base: 1rem;     // 16px
  --text-lg: 1.25rem;    // 20px
  --text-xl: 1.618rem;   // ~26px (φ)
  --text-2xl: 2rem;      // 32px
  --text-3xl: 2.618rem;  // ~42px (φ^2)
  --text-4xl: 3.236rem;  // ~52px (φ^2 + φ)

  // Responsive scaling for tablet screens
  @media (max-width: 768px) {
    --text-xl: 1.5rem;    // ~24px (scaled down)
    --text-2xl: 1.75rem;  // ~28px (scaled down)
    --text-3xl: 2.25rem;  // ~36px (scaled down)
    --text-4xl: 2.75rem;  // ~44px (scaled down)
  }

  // Responsive scaling for mobile screens
  @media (max-width: 480px) {
    --text-lg: 1.125rem;  // ~18px (scaled down)
    --text-xl: 1.375rem;  // ~22px (scaled down)
    --text-2xl: 1.5rem;   // ~24px (scaled down)
    --text-3xl: 1.875rem; // ~30px (scaled down)
    --text-4xl: 2.25rem;  // ~36px (scaled down)
  }

  // Line heights
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  // Font weights
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: hsl(var(--foreground));
  background-color: hsl(var(--background));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// Heading styles
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: hsl(var(--foreground));
}

h1, .text-h1 { font-size: var(--text-4xl); margin-bottom: var(--spacing-6); }
h2, .text-h2 { font-size: var(--text-3xl); margin-bottom: var(--spacing-5); }
h3, .text-h3 { font-size: var(--text-2xl); margin-bottom: var(--spacing-4); }
h4, .text-h4 { font-size: var(--text-xl); margin-bottom: var(--spacing-3); }
h5, .text-h5 { font-size: var(--text-lg); margin-bottom: var(--spacing-3); }
h6, .text-h6 { font-size: var(--text-base); margin-bottom: var(--spacing-2); }

/**
 * @section Text Size
 */

/** @public Extra small text - ~10px */
.text-xs { font-size: var(--text-xs); }

/** @public Small text - 12px */
.text-sm { font-size: var(--text-sm); }

/** @public Base text - 16px */
.text-base { font-size: var(--text-base); }

/** @public Large text - 20px */
.text-lg { font-size: var(--text-lg); }

/** @public Extra large text - ~26px */
.text-xl { font-size: var(--text-xl); }

/** @public 2XL text - 32px */
.text-2xl { font-size: var(--text-2xl); }

/** @public 3XL text - ~42px */
.text-3xl { font-size: var(--text-3xl); }

/** @public 4XL text - ~52px */
.text-4xl { font-size: var(--text-4xl); }

/**
 * @section Font Weight
 */

/** @public Light weight */
.font-light { font-weight: var(--font-light); }

/** @public Normal weight */
.font-normal { font-weight: var(--font-normal); }

/** @public Medium weight */
.font-medium { font-weight: var(--font-medium); }

/** @public Semi-bold weight */
.font-semibold { font-weight: var(--font-semibold); }

/** @public Bold weight */
.font-bold { font-weight: var(--font-bold); }

// v1 compatible weight names
/** @public Lighter font weight - v1 compat */
.lighter { font-weight: 100; }

/** @public Light font weight - v1 compat */
.light { font-weight: 200; }

/** @public Normal font weight - v1 compat */
.normal { font-weight: normal; }

/** @public Bold font weight - v1 compat */
.bold { font-weight: bold; }

/** @public Bolder font weight - v1 compat */
.bolder { font-weight: bolder; }

/** @public Heavy font weight - v1 compat */
.heavy { font-weight: 900; }

/** @public Monospace font family */
.font-mono { font-family: var(--font-mono); }

/**
 * @section Line Height
 */

/** @public No line height spacing */
.leading-none { line-height: var(--leading-none); }

/** @public Tight line height */
.leading-tight { line-height: var(--leading-tight); }

/** @public Normal line height */
.leading-normal { line-height: var(--leading-normal); }

/** @public Relaxed line height */
.leading-relaxed { line-height: var(--leading-relaxed); }

/**
 * @section Text Alignment
 */

/** @public Center text */
.text-center { text-align: center; }

/** @public Left align text */
.text-left { text-align: left; }

/** @public Right align text */
.text-right { text-align: right; }

// v1 compatible utility classes
/** @public Title style - v1 compat */
.title {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  margin: 0;
}

/**
 * @section Semantic Typography
 */

/** @public Title style - large, bold, spaced */
.text-title {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  margin-bottom: var(--spacing-6);
  padding-top: var(--spacing-2);
  letter-spacing: 0.01em;
  word-spacing: 0.05em;
}

/** @public Headline style - prominent heading */
.text-headline {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  margin-bottom: var(--spacing-5);
  padding-top: var(--spacing-1);
  letter-spacing: 0.005em;
  word-spacing: 0.03em;
}

/** @public Lead style - intro paragraph */
.text-lead {
  font-size: var(--text-xl);
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
  margin-bottom: var(--spacing-4);
  padding-top: var(--spacing-1);
  letter-spacing: 0.003em;
  word-spacing: 0.02em;
}

/** @public Body style - standard paragraph */
.text-body {
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  margin-bottom: var(--spacing-3);
  letter-spacing: 0.002em;
  word-spacing: 0.01em;
}

/** @public Caption style - small descriptive text */
.text-caption {
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  margin-bottom: var(--spacing-2);
  letter-spacing: 0.001em;
  word-spacing: 0.005em;
}

/** @public Label style - form labels and tags */
.text-label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: var(--leading-tight);
  margin-bottom: var(--spacing-1);
  letter-spacing: 0.001em;
  word-spacing: 0.003em;
}