/* ==========================================================================
   Klugwerk marketing site — main stylesheet
   Design tokens live in :root. Brand source of truth: the "Red Hexagon"
   identity (assets/images/logo/klugwerk-badge.svg) — reds #D60000 / #D0021B
   on white, wordmark set in Vault Alarm (SimpleBits).
   ========================================================================== */

/* --- Fonts ----------------------------------------------------------------
   Vault Alarm (display/headings) — commercially licensed from SimpleBits.
   Single weight; "Sharp" is a stylistic variant registered as its own family.
   IBM Plex Sans (body) — OFL licensed, mirrored from packwerk_website.
--------------------------------------------------------------------------- */
@font-face {
  font-family: "Vault Alarm";
  src: url("/assets/fonts/vault-alarm/VaultAlarm-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vault Alarm Sharp";
  src: url("/assets/fonts/vault-alarm/VaultAlarm-Sharp.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/ibm-plex-sans/IBMPlexSans-Regular-Latin1.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/ibm-plex-sans/IBMPlexSans-Italic-Latin1.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/ibm-plex-sans/IBMPlexSans-Medium-Latin1.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/ibm-plex-sans/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/ibm-plex-sans/IBMPlexSans-Bold-Latin1.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- Design tokens -------------------------------------------------------- */
:root {
  /* Color — from the Red Hexagon identity */
  --kw-color-red-base: #D60000;    /* inner polygon / stroke */
  --kw-color-red-deep: #D0021B;    /* outer polygon */
  --kw-color-red-hover: #A80000;
  --kw-color-surface-base: #FAF9F7;
  --kw-color-surface-raised: #FFFFFF;
  --kw-color-ink-base: #1E1B1A;
  --kw-color-ink-muted: #6B6462;

  /* Semantic aliases */
  --kw-color-text: var(--kw-color-ink-base);
  --kw-color-text-muted: var(--kw-color-ink-muted);
  --kw-color-accent-base: var(--kw-color-red-base);
  --kw-color-accent-hover: var(--kw-color-red-hover);
  --kw-color-link: var(--kw-color-accent-base);
  --kw-color-link-hover: var(--kw-color-accent-hover);

  /* Typography */
  --kw-font-display: "Vault Alarm", system-ui, -apple-system, "Segoe UI", sans-serif;
  --kw-font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --kw-tracking-tight: -0.02em;

  /* Shape & depth */
  --kw-radius-md: 8px;
  --kw-radius-lg: 16px;
  --kw-radius-full: 9999px;
  --kw-shadow-md: 0 4px 12px rgba(30, 27, 26, 0.08);

  /* Layout */
  --kw-content-max: 72rem;
}

/* --- Reset ----------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--kw-font-sans);
  color: var(--kw-color-text);
  background: var(--kw-color-surface-base);
  line-height: 1.6;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* --- Base elements ---------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  font-family: var(--kw-font-display);
  /* Vault Alarm ships a single weight — avoid synthesized bold */
  font-weight: 400;
  letter-spacing: var(--kw-tracking-tight);
  line-height: 1.15;
}

a {
  color: var(--kw-color-link);
}

a:hover {
  color: var(--kw-color-link-hover);
}

/* --- Site nav ---------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--kw-color-surface-base);
  border-bottom: 1px solid rgba(30, 27, 26, 0.1);
}

.site-nav {
  max-width: var(--kw-content-max);
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-nav__brand {
  font-family: var(--kw-font-display);
  font-weight: 400;
  font-size: 1.25rem;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--kw-color-red-base);
}

.site-nav__links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

.site-nav__links a {
  text-decoration: none;
  color: var(--kw-color-text-muted);
}

.site-nav__links a:hover {
  color: var(--kw-color-text);
}

/* --- Hero ---------------------------------------------------------------------- */
.hero {
  max-width: var(--kw-content-max);
  margin: 0 auto;
  padding: 6rem 1.5rem 4rem;
  text-align: center;
}

.hero__badge {
  width: min(20rem, 70vw);
  margin: 0 auto 2.5rem;
}

.hero h1 {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.25rem;
  color: var(--kw-color-text-muted);
  max-width: 40rem;
  margin: 0 auto;
}

/* --- Blog post ---------------------------------------------------------------- */
.post {
  max-width: 44rem;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

.post-header {
  margin-bottom: 2rem;
}

.post-header time {
  color: var(--kw-color-text-muted);
}

.post-body > * + * {
  margin-top: 1rem;
}

/* --- Footer ---------------------------------------------------------------------- */
.site-footer {
  max-width: var(--kw-content-max);
  margin: 0 auto;
  padding: 3rem 1.5rem;
  color: var(--kw-color-text-muted);
  font-size: 0.875rem;
}