/*
 * Centralized Typography System for funDesk
 * Uses CSS custom properties for consistent font sizing across all pages
 * Maintains JetBrains Mono font for tech/geeky aesthetic
 */

:root {
  /* Base Font Settings */
  --font-family-base: 'JetBrains Mono', monospace;
  --font-family-fallback: 'Inconsolata', monospace;
  
  /* Base Font Size - 16px default */
  --font-size-base: 1rem;
  
  /* Modular Typography Scale */
  --font-size-xs: 0.75rem;      /* 12px - Extra small text */
  --font-size-sm: 0.875rem;     /* 14px - Small text */
  --font-size-base: 1rem;       /* 16px - Body text */
  --font-size-lg: 1.125rem;     /* 18px - Large text */
  --font-size-xl: 1.25rem;      /* 20px - Extra large text */
  
  /* Heading Scale */
  --font-size-h6: 1rem;         /* 16px */
  --font-size-h5: 1.125rem;     /* 18px */
  --font-size-h4: 1.25rem;      /* 20px */
  --font-size-h3: 1.5rem;       /* 24px */
  --font-size-h2: 2rem;         /* 32px */
  --font-size-h1: 2.5rem;       /* 40px */
  
  /* Special Use Cases */
  --font-size-hero: 3rem;       /* 48px - Home page hero h1 */
  --font-size-brand: 1.5rem;    /* 24px - Header brand/logo */
  --font-size-nav: 0.9rem;      /* 14.4px - Navigation links */
  --font-size-footer: 0.875rem; /* 14px - Footer text */
  
  /* Line Heights */
  --line-height-tight: 1.3;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;
  
  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
}

/* Responsive Typography - Mobile First */
/* Slightly smaller fonts on mobile for better readability */
@media screen and (max-width: 767px) {
  :root {
    --font-size-h1: 2rem;       /* 32px on mobile */
    --font-size-h2: 1.75rem;    /* 28px on mobile */
    --font-size-h3: 1.375rem;   /* 22px on mobile */
    --font-size-hero: 2.5rem;   /* 40px hero on mobile */
  }
}

/* Tablet adjustments */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  :root {
    --font-size-h1: 2.25rem;    /* 36px on tablet */
    --font-size-hero: 2.75rem;  /* 44px hero on tablet */
  }
}

/* Large desktop - slightly larger for better readability */
@media screen and (min-width: 1400px) {
  :root {
    --font-size-base: 1.0625rem; /* 17px on large screens */
    --font-size-h1: 2.75rem;     /* 44px on large screens */
    --font-size-hero: 3.5rem;    /* 56px hero on large screens */
  }
}

/* Base Typography Styles */
body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  font-weight: var(--font-weight-normal);
}

/* Heading Defaults */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  margin-top: 2rem;
  margin-bottom: 1rem;
}

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }
h5 { font-size: var(--font-size-h5); }
h6 { font-size: var(--font-size-h6); }

/* Paragraph and List Defaults */
p {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  margin-bottom: 1rem;
}

li {
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}

/* Code blocks */
pre, code {
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}