/* ============================================
   KOMPAS4 — Theme B: "Tro mod programmet"
   Colours taken from the Kompas4 application itself:
   slate menu bar, light grey workspace, orange buttons —
   with WiconSoft teal, typography and navy footer kept.
   Loaded after all other stylesheets.
   ============================================ */

:root {
  /* Dark surfaces become the application's slate */
  --navy-900: #364857;
  --navy-800: #3E5463;
  --navy-700: #4A6572;
  --navy-600: #56727F;
  --navy-500: #6A8591;
  --navy-400: #7F98A3;

  /* Links and highlights keep WiconSoft teal (from tokens.css) */

  --gray-50:  #EEF0F3;
}

/* Header: solid slate bar like the application's menu */
#site-header,
#site-header.scrolled {
  background: #364857;
  border-bottom: 4px solid #4A6572;
  box-shadow: none;
}

/* Hero: light workspace instead of dark navy */
.hero { background-color: #EEF0F3; color: #1C2830; }
.hero-bg-grid,
.hero-bg-gradient,
.hero-orb-1,
.hero-orb-2 { display: none; }
.hero-title { color: #1C2830; }
.hero-subtitle { color: #44535E; }
.hero-eyebrow {
  color: #2F4552;
  background: #FFFFFF;
  border-color: #D3D9DE;
}
.hero-eyebrow-dot { background: var(--orange-500); }
.hero-stats { border-top-color: #D3D9DE; }
.hero-stat-number { color: #1C2830; }
.hero-stat-label { color: #5B6A74; }
.hero .btn-secondary {
  color: #FFFFFF;
  background: #364857;
  border-color: #364857;
}
.hero .btn-secondary:hover { background: #2B3A46; border-color: #2B3A46; }

.app-window {
  background: #FFFFFF;
  border-color: #C9D1D7;
  box-shadow: 0 24px 60px rgba(28, 40, 48, 0.22);
}
.app-window-bar span { background: #C9D1D7; }

/* Footer: a deeper shade of the application's slate, so top and bottom
   of the page belong to the same family. WiconSoft signs it in words. */
#site-footer { background: #2B3A46; }
#site-footer .footer-copyright,
#site-footer .footer-legal a { color: #A9B6BF; }
#site-footer .footer-legal a:hover { color: #FFFFFF; }

.footer-maker {
  margin-top: var(--s4);
  font-size: var(--text-sm);
  color: #C5CFD6;
}
.footer-maker a {
  color: var(--teal-400);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}
.footer-maker a:hover { color: #FFFFFF; text-decoration: underline; }

/* Squarer buttons, like the application */
.btn { border-radius: 6px; }