/* SFS Nexus — brand tokens (from Brand_Guide.md v1) */
@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Palette */
  --charcoal: #15191C;
  --navy: #1B2A41;
  --navy-700: #16223a;
  --green: #6E7A3C;       /* Field Green — accent, sparingly */
  --green-deep: #5A6531;  /* CTA buttons, hovers, links */
  --steel: #9BA1A6;       /* dividers, subtle lines */
  --offwhite: #F5F6F3;
  --fog: #8A8F8B;         /* secondary text, borders */
  --ink: #1A1D1A;         /* body text */

  /* Product accents (brand-harmonious, used to distinguish the two products) */
  --nexus: #6E7A3C;       /* Nexus = training = Field Green */
  --nexus-deep: #5A6531;
  --compass: #2C4C7C;     /* Compass = policy = a brand navy-blue (echoes the police mark) */
  --compass-deep: #223c63;

  /* Type */
  --display: 'Saira Condensed', 'Arial Narrow', sans-serif;
  --body: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { margin: 0; font-family: var(--body); color: var(--ink); }
img { display: block; max-width: 100%; }
a { color: inherit; }

/* Shared display headline treatment */
.sfs-h { font-family: var(--display); font-weight: 700; line-height: 0.96; letter-spacing: -0.01em; }
.sfs-kicker {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
}

/* Striped image placeholder (until real product shots exist) */
.sfs-ph {
  position: relative;
  background-color: #e7e9e3;
  background-image: repeating-linear-gradient(
    -45deg, transparent 0 11px, rgba(27,42,65,0.05) 11px 22px);
  border: 1px solid rgba(27,42,65,0.12);
  display: flex; align-items: center; justify-content: center;
}
.sfs-ph[data-dark] {
  background-color: #1f262b;
  background-image: repeating-linear-gradient(
    -45deg, transparent 0 11px, rgba(255,255,255,0.04) 11px 22px);
  border-color: rgba(255,255,255,0.10);
}
.sfs-ph span {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em;
  color: var(--fog); text-transform: uppercase;
  padding: 6px 10px; text-align: center;
}
.sfs-ph[data-dark] span { color: rgba(255,255,255,0.45); }