:root {
  --color-primary: #0A0A0A;
  --color-primary-text: #ffffff;
  --color-secondary: #FFFFFF;
  --color-secondary-text: #0f172a;
  --color-accent: #3B82F6;
  --color-bg: #FFFFFF;
  --color-bg-alt: #F8FAFC;
  --color-text: #171717;
  --color-text-light: #525252;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5, h6 { color: var(--color-text); line-height: 1.25; font-weight: 700; }

.site-header {
  background-color: var(--color-primary);
  color: var(--color-primary-text);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.site-header a { color: var(--color-primary-text); }
.site-header a:hover { opacity: 0.8; text-decoration: none; }

.site-footer {
  background-color: var(--color-secondary);
  color: var(--color-secondary-text);
  padding: 2rem 0;
  margin-top: 4rem;
}

.site-footer a { color: var(--color-secondary-text); opacity: 0.8; }
.site-footer a:hover { opacity: 1; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.container-narrow { max-width: 800px; margin: 0 auto; padding: 0 1.5rem; }

/* Ensure all sections have contained content */
.section > *:not(.container):not(.container-narrow) {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.btn-primary {
  display: inline-block;
  background-color: var(--color-primary);
  color: var(--color-primary-text);
  padding: 0.75rem 1.5rem;
  border-radius: 0.375rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s;
}
.btn-primary:hover { opacity: 0.9; text-decoration: none; }

.btn-secondary {
  display: inline-block;
  background-color: var(--color-bg);
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  padding: 0.75rem 1.5rem;
  border-radius: 0.375rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
}
.btn-secondary:hover { background-color: var(--color-primary); color: var(--color-primary-text); text-decoration: none; }

.card {
  background: var(--color-bg);
  border: 1px solid var(--color-bg-alt);
  border-radius: 0.5rem;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: box-shadow 0.2s;
}
.card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

.section { padding: 4rem 0; }
.section-alt { background-color: var(--color-bg-alt); color: var(--color-text); }
.section-primary { background-color: var(--color-primary); color: var(--color-primary-text); }
.section-primary h1, .section-primary h2, .section-primary h3, .section-primary p { color: var(--color-primary-text); }
.section-primary a:not(.btn-primary):not(.btn-secondary) { color: var(--color-primary-text); }
.section-primary .text-light { color: var(--color-primary-text); opacity: 0.85; }
.section-primary .btn-primary { background-color: var(--color-bg); color: var(--color-primary) !important; }
.section-primary .btn-secondary { background-color: transparent; color: var(--color-primary-text) !important; border-color: var(--color-primary-text); }

.text-light { color: var(--color-text-light); }

/* Ensure good contrast - override any gray classes */
.section p, .section li { color: var(--color-text); }
.section .text-light, .section .opacity-90 { color: var(--color-text-light); }

@media (max-width: 768px) {
  .section { padding: 2rem 0; }
  h1 { font-size: 1.875rem; }
  h2 { font-size: 1.5rem; }
}