/* =========================================================================
   PENTAGRAM / United States Department of War
   style.css — design tokens, reset, base typography
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Source+Serif+4:opsz,wght@8..60,500;8..60,600;8..60,700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Color tokens -------------------------------------------------- */
  --ink-950:        #0B0F0D;   /* near-black, deepest ground */
  --green-900:      #16241B;   /* deep military green — header / footer base */
  --green-800:      #1C2E22;
  --green-700:      #22392A;   /* panels, hover */
  --green-600:      #2C4832;
  --steel-700:      #3D4640;   /* borders, rules */
  --steel-500:      #6B7570;   /* secondary text on dark */
  --steel-300:      #A7AFA9;
  --paper-50:       #F5F3EC;   /* page background */
  --paper-100:      #ECE8DB;   /* alt section background */
  --paper-200:      #DFDACB;
  --white:          #FFFFFF;
  --ink-800:        #22261F;   /* body text on paper */
  --blue-900:       #12253D;   /* link hover / deep institutional blue */
  --blue-700:       #1F3A5F;   /* links, primary actions */
  --blue-100:       #DCE6EF;
  --gold-600:       #A9862F;   /* seal / insignia accent — use sparingly */
  --gold-100:       #F1E9D2;
  --red-700:        #7A2222;   /* classification / alerts */
  --red-100:        #F1DFDF;

  /* Threat condition scale */
  --tc-severe:   #7A2222;
  --tc-high:     #9C5A22;
  --tc-elevated: #A9862F;
  --tc-guarded:  #3B5F86;
  --tc-low:      #2F5C3F;

  /* ---- Type tokens ----------------------------------------------------- */
  --font-display: 'Source Serif 4', 'Georgia', serif;
  --font-body:    'Public Sans', -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  /* ---- Layout tokens ----------------------------------------------------- */
  --container-max: 1200px;
  --radius-sm: 2px;
  --radius-md: 3px;
  --shadow-sm: 0 1px 2px rgba(11, 15, 13, 0.12);
  --shadow-md: 0 4px 16px rgba(11, 15, 13, 0.16);
  --shadow-lg: 0 12px 32px rgba(11, 15, 13, 0.22);

  --focus-ring: 0 0 0 3px rgba(31, 58, 95, 0.45), 0 0 0 1px var(--blue-700);
}

/* ---- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }
img, picture { max-width: 100%; display: block; }
input, button, textarea, select { font: inherit; color: inherit; }
a { text-decoration: none; color: inherit; }
table { border-collapse: collapse; width: 100%; }

body {
  font-family: var(--font-body);
  background: var(--paper-50);
  color: var(--ink-800);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--green-900);
  line-height: 1.15;
  font-weight: 600;
}

h1 { font-size: clamp(2.2rem, 3.6vw, 3.4rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.05rem; }

p.lede {
  font-size: 1.15rem;
  color: var(--steel-700);
  max-width: 62ch;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-700);
  font-weight: 600;
}

.eyebrow--onDark { color: var(--gold-600); }

a.link {
  color: var(--blue-700);
  border-bottom: 1px solid rgba(31, 58, 95, 0.35);
  transition: border-color 0.15s ease, color 0.15s ease;
}
a.link:hover { color: var(--blue-900); border-color: var(--blue-900); }

/* ---- Accessibility ----------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -3rem;
  background: var(--ink-950);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top 0.15s ease;
  font-weight: 600;
}
.skip-link:focus { top: 1rem; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* Accessibility mode (toggled via JS): raises contrast, enlarges focus */
body.a11y-mode {
  --paper-50: #FFFFFF;
  --paper-100: #F1F1F1;
  --ink-800: #000000;
  --steel-700: #202020;
}
body.a11y-mode * { text-shadow: none !important; }
body.a11y-mode :focus-visible { box-shadow: 0 0 0 4px #000, 0 0 0 6px #FFD400; }

::selection { background: var(--gold-100); color: var(--ink-950); }