:root {
  /* Base font size for 16px (1rem) */
  --font-size-base: 1rem;
  
  /* Fluid typography scale */
  --font-size-xs: clamp(0.75rem, 0.8vw + 0.5rem, 0.85rem);
  --font-size-sm: clamp(0.875rem, 0.9vw + 0.6rem, 1rem);
  --font-size-base: clamp(1rem, 1vw + 0.7rem, 1.125rem);
  --font-size-lg: clamp(1.125rem, 1.2vw + 0.8rem, 1.25rem);
  --font-size-xl: clamp(1.25rem, 1.5vw + 0.9rem, 1.5rem);
  --font-size-2xl: clamp(1.5rem, 2vw + 1rem, 2rem);
  --font-size-3xl: clamp(2rem, 2.5vw + 1.2rem, 2.5rem);
  
  /* Line heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;
  
  /* Font weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
}

/* Base typography */
body {
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  font-weight: var(--font-weight-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Text size utilities */
.text-xs { font-size: var(--font-size-xs) !important; }
.text-sm { font-size: var(--font-size-sm) !important; }
.text-base { font-size: var(--font-size-base) !important; }
.text-lg { font-size: var(--font-size-lg) !important; }
.text-xl { font-size: var(--font-size-xl) !important; }
.text-2xl { font-size: var(--font-size-2xl) !important; }
.text-3xl { font-size: var(--font-size-3xl) !important; }

/* Line height utilities */
.leading-tight { line-height: var(--line-height-tight) !important; }
.leading-normal { line-height: var(--line-height-normal) !important; }
.leading-relaxed { line-height: var(--line-height-relaxed) !important; }

/* Font weight utilities */
.font-light { font-weight: var(--font-weight-light) !important; }
.font-normal { font-weight: var(--font-weight-normal) !important; }
.font-medium { font-weight: var(--font-weight-medium) !important; }
.font-semibold { font-weight: var(--font-weight-semibold) !important; }
.font-bold { font-weight: var(--font-weight-bold) !important; }

/* Responsive container */
.container {
  width: 100%;
  max-width: 100%;
  padding-right: 1rem;
  padding-left: 1rem;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}