/* SCOTUS Analytics — Base Styles */

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

html { font-size: 16px; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg-primary);
  line-height: 1.6;
}

img { max-width: 100%; display: block; }
a { color: var(--accent-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Typography */
h1, h2, h3, h4 {
  font-family: var(--font-headline);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
}

h1 { font-size: 2.5rem; text-transform: uppercase; letter-spacing: 0.02em; }
h2 { font-size: 1.75rem; text-transform: uppercase; letter-spacing: 0.02em; }
h3 { font-size: 1.25rem; font-weight: 600; }
h4 { font-size: 1rem; font-weight: 600; }

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

.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.text-tertiary { color: var(--text-tertiary); }
.text-center { text-align: center; }

/* Data typography */
.data-xl { font-family: var(--font-data); font-size: 3.5rem; font-weight: 700; line-height: 1; }
.data-lg { font-family: var(--font-data); font-size: 2rem; font-weight: 700; line-height: 1; }
.data-md { font-family: var(--font-data); font-size: 1.25rem; font-weight: 600; }

/* Layout */
.container {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.container-narrow {
  max-width: var(--narrow-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.section {
  padding: var(--space-2xl) 0;
}

.section-title {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--border-light);
}

/* Grid */
.grid { display: grid; gap: var(--space-lg); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Flex */
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-center { display: flex; justify-content: center; align-items: center; }
.flex-col { display: flex; flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }