/* ═══════════════════════════════════════════════════════════════
   SHIELD AI — Reset + Base Element Styles
   ═══════════════════════════════════════════════════════════════ */

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--bg-0);
  min-height: 100vh;
  line-height: 1.5;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-md); }
h3 { font-size: var(--text-base); }

p { margin: 0; }

/* S-105: Link hover — underline slides in */
a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 150ms ease;
}
a:hover { border-bottom-color: var(--accent); }

ul, ol { list-style: none; }

pre, code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

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

/* S-042: Amber warmth on text selection */
::selection {
  background: rgba(212, 160, 25, 0.25);
  color: var(--text-primary);
}

.narrative-card ::selection {
  background: rgba(212, 160, 25, 0.35); /* more visible — this text gets copied into reports */
}

/* S-004: Subtle noise grain — analog warmth on digital void */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.015;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* S-031: Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* S-032: High-contrast mode support */
@media (forced-colors: active) {
  .panel, .stat-card, .widget-card, .job-card,
  .report-card, .narrative-card, .mini-card,
  .scene-panel-card, .milestone, .badge, .risk-tag {
    border: 1px solid CanvasText;
  }
  .tone-critical, .tone-high, .tone-rival {
    border-left-color: LinkText;
  }
  .tone-low, .tone-ally {
    border-left-color: VisitedText;
  }
  .progress-fill { background: Highlight; }
  .connection-dot.connected { background: LinkText; }
  .connection-dot.disconnected { background: Mark; }
  button { border: 1px solid ButtonText; }
}

/* S-033: Skip-to-content link */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 10001;
  padding: var(--space-2) var(--space-4);
  background: var(--accent);
  color: var(--bg-0);
  font: 600 var(--text-base)/1.2 var(--font-display);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top 150ms ease;
}
.skip-link:focus {
  top: var(--space-2);
}

/* S-084: Scrollbar — invisible until hovered */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: transparent; border-radius: var(--radius-pill); }
*:hover > ::-webkit-scrollbar-thumb,
:hover::-webkit-scrollbar-thumb { background: var(--bg-3); }
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* Firefox scrollbar */
* { scrollbar-width: thin; scrollbar-color: transparent transparent; }
*:hover { scrollbar-color: var(--bg-3) transparent; }