/* ================================
   BASE - Reset, Variables, Typography
   ================================ */

/* DARK MODE PREPARATION
   Future implementation will override these variables:
   --color-bg, --color-text, --color-dark, --color-light, --color-gray
   Plus shadows and any filter-based image effects
*/

/* Reset */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* CSS Variables */
:root {
  /* Colors */
  --color-primary: #50A7F9;
  --color-secondary: #E8913A;
  --color-tertiary: #5DB075;
  --color-dark: #424242;
  --color-gray: #A1A1A1;
  --color-light: #E5E5E5;
  --color-bg: #FAFAFA;
  --color-text: #1A1A1A;
  
  /* 8px Spacing Scale */
  --space-2: 0.125rem;   /*  2px */
  --space-4: 0.25rem;    /*  4px */
  --space-8: 0.5rem;     /*  8px */
  --space-16: 1rem;      /* 16px */
  --space-24: 1.5rem;    /* 24px */
  --space-32: 2rem;      /* 32px */
  --space-48: 3rem;      /* 48px */
  --space-64: 4rem;      /* 64px */
  --space-128: 8rem;     /* 128px */
  
  /* Layout */
  --max-width: 1200px;
  --content-width: 720px;
  
  /* Typography */
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'IBM Plex Serif', Georgia, serif;
}

/* Base Typography */
html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  min-height: 100vh;
}

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.2;
}

h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.25rem; }

p { margin-bottom: var(--space-16); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover { color: var(--color-secondary); }

ul, ol { padding-left: var(--space-32); }
li { margin-bottom: var(--space-8); }

/* Utility Classes */
.serif { font-family: var(--font-serif); }
.text-gray { color: var(--color-gray); }
.text-primary { color: var(--color-primary); }

/* Large Screen Typography Scaling */
@media (min-width: 1440px) {
  html { font-size: 112.5%; }
}

@media (min-width: 1920px) {
  html { font-size: 125%; }
}

@media (min-width: 2560px) {
  html { font-size: 137.5%; }
}