/*
 * EEA Design System — Base
 * Version: 1.0.0
 *
 * Depends on: tokens.css (must be loaded first)
 *
 * Usage:
 *   <link rel="stylesheet" href="https://entethalliance.github.io/eea-design-system/tokens.css">
 *   <link rel="stylesheet" href="https://entethalliance.github.io/eea-design-system/base.css">
 *
 * What this file does:
 *   - Minimal reset (box-sizing, margin)
 *   - Body defaults wired to EEA tokens
 *   - Scrollbar styling
 *   - Focus / reduced-motion / print utilities
 *
 * What this file does NOT do:
 *   - Navigation (nav.css)
 *   - Cards, buttons, badges (components.css)
 *   - Page layouts (each site owns its own layout)
 */

/* ─────────────────────────────────────────────────────────────
   BOX MODEL RESET
───────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ─────────────────────────────────────────────────────────────
   BODY DEFAULTS
───────────────────────────────────────────────────────────── */
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--eea-font);
  font-size: var(--eea-text-base);
  font-weight: var(--eea-weight-normal);
  line-height: var(--eea-leading-base);
  color: var(--eea-text);
  background-color: var(--eea-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─────────────────────────────────────────────────────────────
   TYPOGRAPHY DEFAULTS
───────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--eea-space-4) 0;
  font-weight: var(--eea-weight-bold);
  line-height: var(--eea-leading-tight);
  color: var(--eea-text);
}

h1 { font-size: var(--eea-text-3xl); }
h2 { font-size: var(--eea-text-xl); font-weight: var(--eea-weight-semi); }
h3 { font-size: var(--eea-text-lg); font-weight: var(--eea-weight-semi); }

p {
  margin: 0 0 var(--eea-space-4) 0;
  color: var(--eea-text-2);
  line-height: var(--eea-leading-base);
}

a {
  color: var(--eea-accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

code, kbd, samp, pre {
  font-family: var(--eea-font-mono);
  font-size: 0.9em;
}

/* ─────────────────────────────────────────────────────────────
   LAYOUT CONTAINER
───────────────────────────────────────────────────────────── */
.eea-container {
  max-width: var(--eea-container);
  margin-inline: auto;
  padding-inline: var(--eea-container-px);
}

.eea-container--wide {
  max-width: var(--eea-container-wide);
  margin-inline: auto;
  padding-inline: var(--eea-container-px);
}

@media (max-width: 768px) {
  .eea-container,
  .eea-container--wide {
    padding-inline: var(--eea-container-px-sm);
  }
}

/* ─────────────────────────────────────────────────────────────
   SCROLLBAR
───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--eea-border-solid); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--eea-text-3); }

/* ─────────────────────────────────────────────────────────────
   FOCUS STYLES
───────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--eea-accent);
  outline-offset: 2px;
  border-radius: var(--eea-radius-xs);
}

/* ─────────────────────────────────────────────────────────────
   REDUCED MOTION
───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   PRINT
───────────────────────────────────────────────────────────── */
@media print {
  body {
    background: #fff;
    color: #000;
    font-size: 12pt;
  }
  .eea-unified-nav,
  .eea-unified-nav + * { /* remove nav offset */ }
  a { color: #000; text-decoration: underline; }
}

/* ─────────────────────────────────────────────────────────────
   SKIP LINK (accessibility)
───────────────────────────────────────────────────────────── */
.eea-skip-link {
  position: absolute;
  top: -999px;
  left: var(--eea-space-4);
  padding: var(--eea-space-2) var(--eea-space-4);
  background: var(--eea-accent);
  color: #fff;
  font-size: var(--eea-text-sm);
  font-weight: var(--eea-weight-semi);
  border-radius: var(--eea-radius-sm);
  z-index: 999999;
}
.eea-skip-link:focus {
  top: var(--eea-space-4);
}