/* ==========================================================================
   CSS Reset & Base Styles
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  font: inherit;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px; /* Prevents sticky header from obscuring anchors */
}

body {
  min-height: 100vh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
}

ul, ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ==========================================================================
   Design Tokens
   ========================================================================== */
:root {
  /* Colors - Light Theme */
  --color-bg-primary: #FCFCFB;
  --color-bg-secondary: #F4F4F4;
  --color-text-primary: #111111;
  --color-text-secondary: #555555;
  --color-border-default: #E2E2E2;
  --color-accent-interactive: #3B82F6; /* Premium Electric Blue */
  
  /* Typography */
  --font-serif: 'Crimson Pro', 'Playfair Display', serif;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'Space Mono', 'DM Mono', 'JetBrains Mono', monospace;
  
  /* Type Scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.5rem;
  --text-4xl: 3rem;
  --text-5xl: 4rem;
  
  /* Spacing System (8px Grid) */
  --space-1: 0.5rem;   /* 8px */
  --space-2: 1rem;     /* 16px */
  --space-3: 1.5rem;   /* 24px */
  --space-4: 2rem;     /* 32px */
  --space-6: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */
  --space-12: 6rem;    /* 96px */
  --space-16: 8rem;    /* 128px */
  --space-20: 10rem;   /* 160px */

  /* Structural */
  --radius-control: 4px;
  --radius-block: 0px;

  /* Components */
  --color-tag-bg: var(--color-text-primary);
  --color-tag-text: var(--color-bg-primary);
  --color-tag-border: var(--color-text-primary);
}

/* Dark Theme Overrides */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-primary: #1A1A1A;
    --color-bg-secondary: #222222;
    --color-text-primary: #EAEAEA;
    --color-text-secondary: #A0A0A0;
    --color-border-default: rgba(255, 255, 255, 0.12); /* Glass-like crisp border */
    --color-accent-interactive: #3B82F6;
  }
}

/* ==========================================================================
   Global Element Styles
   ========================================================================== */
body {
  font-family: var(--font-sans);
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-size: var(--text-base);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  line-height: 1.1;
  font-weight: 600;
  margin-bottom: var(--space-3);
  color: var(--color-text-primary);
}

p {
  margin-bottom: var(--space-3);
  color: var(--color-text-secondary);
}

/* ==========================================================================
   Accessibility Utilities
   ========================================================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-accent-interactive);
  color: #fff;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-weight: 600;
  z-index: 100;
  transition: top 0.2s ease;
  border-radius: 0 0 var(--radius-control) 0;
}

.skip-link:focus {
  top: 0;
  outline: 2px solid var(--color-text-primary);
  outline-offset: 2px;
}

/* Focus States */
*:focus-visible {
  outline: 2px solid var(--color-accent-interactive);
  outline-offset: 2px;
}