/* ============================================================
   NSHQ Defence — Design Tokens (operator-grade)
   ============================================================
   Inspired by Anduril, Helsing, Saab Defence visual language.
   Maintains DM Serif Display (headlines) as gene-shared with the
   Fractio family; replaces DM Sans (body) with IBM Plex Sans for
   technical credibility, and adds IBM Plex Mono for spec blocks.

   Palette philosophy:
   - Carbon background (warmer than pure black, less fatiguing)
   - Slate panels for cards / containers
   - Single signal accent (deep gold, NSHQ-derived but more saturated)
   - Forest as familial link to Fractio (used sparingly in badges/footer)
   - High-contrast text for legibility on dark
   ============================================================ */

:root {
  /* ---------- Colour tokens ---------- */

  /* Surfaces (dark first, light variants for inverted blocks) */
  --carbon:        #0e1116;  /* primary background */
  --slate:         #1a1f26;  /* card / panel surface */
  --steel:         #2a3340;  /* borders, dividers */
  --steel-light:   #3a4452;  /* hover state on steel borders */
  --graphite:      #20262e;  /* alternate panel surface */

  /* Text */
  --snow:          #f5f5f3;  /* primary text on dark */
  --snow-mute:     #c8c5bf;  /* secondary text on dark */
  --mute:          #8a857f;  /* tertiary / metadata text (Fractio inheritance) */
  --ink:           #2c2c2c;  /* text on light surfaces (rare, e.g. inverted CTAs) */

  /* Brand accents */
  --signal:        #d4a93f;  /* PRIMARY ACCENT — single CTA colour (saturated NSHQ gold) */
  --signal-hover:  #e8bd52;  /* hover/focus on signal */
  --signal-deep:   #a8842f;  /* pressed state */
  --forest:        #3d5a47;  /* Fractio family link — badges, footer accents */
  --forest-light:  #4a6e55;  /* forest hover */

  /* Semantic */
  --success:       #4a6b55;  /* uses forest variant intentionally */
  --warning:       #c4a35a;  /* gold-adjacent for warnings */
  --danger:        #c8102e;  /* alerts only, used sparingly */
  --info:          #5a7d8f;  /* steel-blue for informational badges */

  /* Inverted (for rare light-on-dark blocks like floating CTAs) */
  --cream:         #faf9f7;  /* Fractio cream, for inverted surfaces */
  --cream-mute:    #ede9e3;

  /* ---------- Typography ---------- */

  --font-headline: 'DM Serif Display', 'Source Serif Pro', Georgia, serif;
  --font-body:     'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:     'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale (modular, 1.25 ratio anchored at 1rem = 16px) */
  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.875rem;  /* 14px */
  --text-base:  1rem;      /* 16px */
  --text-md:    1.125rem;  /* 18px */
  --text-lg:    1.25rem;   /* 20px */
  --text-xl:    1.5rem;    /* 24px */
  --text-2xl:   1.875rem;  /* 30px */
  --text-3xl:   2.5rem;    /* 40px */
  --text-4xl:   3.25rem;   /* 52px */
  --text-5xl:   4.25rem;   /* 68px */

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  --tracking-tight:  -0.02em;  /* large headlines */
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-wider:  0.08em;   /* uppercase eyebrow labels */
  --tracking-widest: 0.16em;   /* nav uppercase, factsheet labels */

  /* ---------- Spacing scale (4px base) ---------- */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-7:  3rem;      /* 48px */
  --space-8:  4rem;      /* 64px */
  --space-9:  6rem;      /* 96px */
  --space-10: 8rem;      /* 128px */

  /* ---------- Layout ---------- */
  --container-narrow: 720px;
  --container-base:   1100px;
  --container-wide:   1320px;

  /* ---------- Borders & radii ---------- */
  --radius-none: 0;
  --radius-xs:   2px;   /* hairline rounding on tags/chips */
  --radius-sm:   4px;   /* most cards */
  --radius-md:   8px;   /* CTAs, large panels */

  --border-thin:    1px solid var(--steel);
  --border-medium:  2px solid var(--steel-light);
  --border-signal:  1px solid var(--signal);

  /* ---------- Shadows (subtle on dark — almost imperceptible) ---------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-signal: 0 0 0 1px var(--signal), 0 0 24px rgba(212, 169, 63, 0.25);

  /* ---------- Motion ---------- */
  --ease-snap:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-smooth:  cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   120ms;
  --duration-normal: 200ms;
  --duration-slow:   400ms;

  /* ---------- Z-index scale ---------- */
  --z-base:    1;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   1000;
  --z-toast:   10000;
}

/* ============================================================
   Base reset & body
   ============================================================ */

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--carbon);
  color: var(--snow);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: 400;
}

/* ============================================================
   Typography primitives
   ============================================================ */

h1, h2, h3, h4 {
  font-family: var(--font-headline);
  font-weight: 400;  /* DM Serif Display only ships at 400 */
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--snow);
  margin: 0 0 var(--space-4) 0;
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

p {
  margin: 0 0 var(--space-4) 0;
  color: var(--snow-mute);
  line-height: var(--leading-relaxed);
}

a {
  color: var(--signal);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-fast) var(--ease-snap),
              color var(--duration-fast) var(--ease-snap);
}

a:hover {
  color: var(--signal-hover);
  border-bottom-color: var(--signal-hover);
}

/* Eyebrow / kicker label above headlines */
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: var(--space-3);
}

/* Monospace specs / factsheet rows */
.spec-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  padding: var(--space-3) 0;
  border-bottom: var(--border-thin);
}

.spec-row .label {
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-size: var(--text-xs);
}

.spec-row .value {
  color: var(--snow);
}

/* ============================================================
   CTA buttons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-snap);
  text-decoration: none;
  border-bottom: none;
}

.btn-primary {
  background: var(--signal);
  color: var(--carbon);
}

.btn-primary:hover {
  background: var(--signal-hover);
  color: var(--carbon);
  box-shadow: var(--shadow-signal);
  border-bottom: none;
}

.btn-ghost {
  background: transparent;
  color: var(--snow);
  border: var(--border-thin);
}

.btn-ghost:hover {
  border-color: var(--signal);
  color: var(--signal);
  border-bottom: 1px solid var(--signal);
}

/* ============================================================
   Cards / panels
   ============================================================ */

.panel {
  background: var(--slate);
  border: var(--border-thin);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
  transition: border-color var(--duration-normal) var(--ease-snap);
}

.panel:hover {
  border-color: var(--steel-light);
}

.panel--accent {
  border-left: 3px solid var(--signal);
}

/* ============================================================
   Country / category dots (mirrors NSHQ pattern)
   ============================================================ */

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: var(--space-2);
}

.dot-ee { background: #0072ce; }  /* Estonia */
.dot-fi { background: #003580; }  /* Finland */
.dot-se { background: #006aa7; }  /* Sweden */
.dot-dk { background: #c8102e; }  /* Denmark */
.dot-no { background: #ba0c2f; }  /* Norway */
.dot-pt { background: #006600; }  /* Portugal */
.dot-es { background: #aa151b; }  /* Spain */

/* ============================================================
   Tier badges (for directory)
   ============================================================ */

.tier-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs);
  text-transform: uppercase;
}

.tier-1 { background: var(--signal); color: var(--carbon); }
.tier-2 { background: var(--forest); color: var(--snow); }
.tier-3 { background: var(--steel); color: var(--snow-mute); }
.tier-4 { background: var(--graphite); color: var(--mute); }

/* ============================================================
   Fractio AB attribution badge (footer)
   ============================================================ */

.fractio-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  color: var(--mute);
  text-transform: uppercase;
}

.fractio-badge::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--forest);
  border-radius: 50%;
}

/* ============================================================
   Container utilities
   ============================================================ */

.container {
  max-width: var(--container-base);
  margin: 0 auto;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: var(--container-wide); }

/* ============================================================
   Section spacing rhythm
   ============================================================ */

section {
  padding: var(--space-9) 0;
}

@media (max-width: 768px) {
  section {
    padding: var(--space-7) 0;
  }

  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl); }
}