/* System Font Stack */
:root {
  /* Modern system font stack optimized for readability */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", 
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, 
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  
  /* Monospace system font stack */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 
    "Liberation Mono", "Courier New", monospace;
  
  /* Font feature settings */
  --font-features: "kern" 1, "liga" 1, "calt" 1;
  
  /* Font sizes */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  
  /* Line heights */
  --line-height-none: 1;
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;
  
  /* Font weights */
  --font-weight-thin: 100;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  /* Letter spacing */
  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;
}

/* Base typography settings */
html {
  font-family: var(--font-sans);
  font-size: 16px;
  font-feature-settings: var(--font-features);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Monospace elements */
code, pre, kbd, samp {
  font-family: var(--font-mono);
}

/* Heading styles */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold);
}

/* Body text */
p, ul, ol {
  font-family: var(--font-sans);
  line-height: var(--line-height-normal);
  font-weight: var(--font-weight-normal);
}

/* Small text */
small {
  font-size: var(--font-size-sm);
}

/* Font optimization */
@media (prefers-reduced-data: reduce) {
  html {
    font-feature-settings: normal;
  }
}