/* ==================== DESIGN SYSTEM VARIABLES ==================== */
/* Based on foundation.json */

:root {
  /* Colors - Strict Monochrome */
  --color-primary-text: #000000;
  --color-background: #FFFFFF;
  --color-light-gray: #888888;
  --color-medium-gray: #555555;
  --color-border-light: #EEEEEE;
  --color-divider: #DDDDDD;

  /* Fonts */
  --font-primary: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Typography Styles - Using clamp() for fluid responsive sizing */

  /* Header */
  --font-header-logo: clamp(1.2rem, 3vw, 1.8rem);
  --font-header-tagline: clamp(0.7rem, 1.5vw, 0.9rem);
  --font-header-description: clamp(0.75rem, 2vw, 1rem);

  /* Pre-Hero */
  --font-prehero-part1: clamp(3.2rem, 8vw, 5rem);
  --font-prehero-part2: clamp(1.5rem, 4vw, 2.2rem);
  --font-prehero-part3: clamp(1.25rem, 3.5vw, 1.75rem);

  /* Hero */
  --font-hero-intro: clamp(2.5rem, 8vw, 4.5rem);
  --font-hero-message: clamp(1.1rem, 3vw, 1.5rem);
  --font-hero-blurb-headline: clamp(0.95rem, 2.5vw, 1.25rem);
  --font-hero-blurb-desc: clamp(0.85rem, 2vw, 1rem);

  /* Short Post */
  --font-shortpost-caption: clamp(1rem, 3vw, 1.25rem);
  --font-shortpost-attribution: clamp(0.85rem, 2vw, 1rem);

  /* About/CTA */
  --font-about-blurb: clamp(1.1rem, 3vw, 1.5rem);
  --font-cta-title: clamp(1.5rem, 4vw, 2.2rem);
  --font-cta-button: clamp(1.1rem, 3vw, 1.5rem);

  /* Parting Message */
  --font-parting-line1: clamp(1.8rem, 5vw, 3rem);
  --font-parting-line2: clamp(1.5rem, 4vw, 2.5rem);
  --font-parting-line3: clamp(1.2rem, 3.5vw, 2rem);

  /* Footer */
  --font-footer-copyright: clamp(0.8rem, 2vw, 1rem);
  --font-footer-legal: 0.75rem;

  /* Spacing System */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;

  /* Layout */
  --max-width: 1200px;
  --mobile-nav-height: 80px;
}

/* Base Styles */
body {
  font-family: var(--font-primary);
  color: var(--color-primary-text);
  background: var(--color-background);
  padding-bottom: var(--mobile-nav-height);
}

@media (min-width: 768px) {
  body {
    padding-bottom: 0;
  }
}

/* Text rendering optimizations */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}