/* Body, typography baseline, page background grid. */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  min-height: 100vh;
  overflow-x: hidden;
}
/* Larger headers (fs-xl and up) use the display font; smaller stay on body font */
h1 { font-family: var(--font-display); font-size: var(--fs-2xl); line-height: var(--lh-tight); font-weight: 600; letter-spacing: var(--ls-wide); }
h2 { font-family: var(--font-display); font-size: var(--fs-xl);  line-height: var(--lh-tight); font-weight: 600; letter-spacing: var(--ls-wide); }
h3 { font-size: var(--fs-lg); line-height: var(--lh-snug); font-weight: 600; }
h4 { font-size: var(--fs-md); line-height: var(--lh-snug); font-weight: 600; }
p  { line-height: var(--lh-relaxed); }
button, input, select, textarea { font-size: inherit; font-family: inherit; }
small { font-size: var(--fs-sm); }

/* Tactical grid background */
body {
  background:
    radial-gradient(ellipse at top, rgba(42, 92, 171, 0.08), transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(168, 48, 43, 0.06), transparent 60%),
    var(--bg-0);
  background-attachment: fixed;
}
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(80, 100, 140, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80, 100, 140, 0.025) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}
body::after {
  content: '';
  position: fixed; inset: 0;
  background: repeating-linear-gradient(180deg, transparent 0, transparent 3px, rgba(255,255,255,0.008) 3px, rgba(255,255,255,0.008) 4px);
  pointer-events: none;
  z-index: 1;
}

/* ============ Typography helpers ============ */
.stencil { font-family: var(--font-display); letter-spacing: 0.04em; }
.head { font-family: var(--font-body); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.mono { font-family: var(--font-body); font-size: var(--fs-sm); }
.dim { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.text-md { font-size: var(--fs-md); }
.text-center { text-align: center; }
.weight-700 { font-weight: 700; }
.color-orange { color: var(--orange); }
.color-green  { color: var(--green); }
.color-red    { color: var(--red); }

/* ============ Layout utility helpers ============ */
.flex-1     { flex: 1; }
.flex-row   { display: flex; align-items: center; gap: 14px; }
.flex-end   { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.span-full  { grid-column: 1 / -1; }
.no-margin  { margin: 0; }
.mb-md      { margin-bottom: 14px; }
.mt-sm      { margin-top: 8px; }
.mt-md      { margin-top: 18px; }
.pad-card   { padding: 24px; }
.pad-row    { padding: 14px 20px; }
.padding-md { padding: 14px 20px; }
.padding-lg { padding: 32px; }
.text-xl    { font-size: var(--fs-xl); }
.dim-faded  { opacity: 0.55; font-size: var(--fs-sm); }
.padding-xs { padding: 4px 0; }
.ls-wider   { letter-spacing: 0.1em; }
.weight-bold-md { font-weight: 700; font-size: var(--fs-md); }
/* CV-with-modifier tint — used in the allocation matrix to colour the
   effective CV value green (boost) / red (penalty) / neutral (no mod). */
.cv-mod-zero { color: var(--text); }
.cv-mod-neg  { color: var(--red); }
.cv-mod-pos  { color: var(--green); }