/* Base: reset, body, typography, section defaults */

/* Global Reset */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background-color: var(--color-bg);
  background-image: radial-gradient(ellipse 80% 50% at 50% -20%, var(--color-bg-glow), transparent),
    linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-subtle) 100%);
}

h1 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-md);
  letter-spacing: 0.02em;
}

h2, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-md);
  letter-spacing: 0.02em;
}

h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-md);
  text-align: center;
}

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

/* Sections */
section {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-md);
}

section h2 {
  font-size: var(--font-size-xl);
  color: var(--color-text);
  text-align: center;
  margin-bottom: var(--space-xl);
  position: relative;
}

/* Section heading divider: simple clean line */
section h2::after {
  content: '';
  display: block;
  width: min(100px, 32vw);
  height: 2px;
  margin: var(--space-md) auto 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-accent) 25%,
    var(--color-accent) 75%,
    transparent
  );
  border-radius: 2px;
  opacity: 1;
}

/* Section base - scroll reveal handled in animations.css */