/*
 * Bits & Friends — brand.css
 * Single-file Bundle: @font-face + tokens.css + reset.css + Komponenten-Basis.
 *
 * Auf jedem Touchpoint einbinden via:
 *   <link rel="stylesheet" href="https://brand.nc4.io/brand.css">
 *
 * Wenn das Tool eigenen Reset oder Theme-Layer hat: stattdessen nur tokens.css
 * einbinden und Komponenten-Styles selbst mappen.
 */

/* === Self-hosted Fonts via brand.nc4.io =================================== */

@font-face {
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("/fonts/RobotoFlex-VariableFont.woff2") format("woff2-variations"),
       url("/fonts/RobotoFlex-VariableFont.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/IBMPlexMono-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/IBMPlexMono-Italic.woff2") format("woff2");
}

/* === Tokens === */
@import url("/tokens.css");

/* === Reset === */
@import url("/reset.css");

/* === Headings ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--bnf-font-sans);
  font-weight: var(--bnf-weight-bold);
  line-height: var(--bnf-leading-tight);
  letter-spacing: var(--bnf-tracking-tight);
  color: var(--bnf-text);
  margin: 0 0 var(--bnf-space-4);
}

h1 { font-size: var(--bnf-text-4xl); }
h2 { font-size: var(--bnf-text-3xl); }
h3 { font-size: var(--bnf-text-2xl); }
h4 { font-size: var(--bnf-text-xl); }
h5 { font-size: var(--bnf-text-lg); }
h6 { font-size: var(--bnf-text-base); text-transform: uppercase; letter-spacing: var(--bnf-tracking-wide); color: var(--bnf-text-muted); }

p { margin: 0 0 var(--bnf-space-4); }

/* === Links =============================================================== */

a {
  color: var(--bnf-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 120ms ease, text-decoration-color 120ms ease;
}

a:hover { text-decoration-thickness: 2px; }

a:focus-visible {
  outline: 2px solid var(--bnf-focus-ring);
  outline-offset: 2px;
  border-radius: var(--bnf-radius-sm);
}

/* === Buttons ============================================================= */

.bnf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bnf-space-2);
  padding: var(--bnf-space-3) var(--bnf-space-4);
  font-family: var(--bnf-font-sans);
  font-size: var(--bnf-text-sm);
  font-weight: var(--bnf-weight-medium);
  letter-spacing: var(--bnf-tracking-wide);
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--bnf-radius-md);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 80ms ease;
  text-decoration: none;
  user-select: none;
}

.bnf-btn:active { transform: translateY(1px); }
.bnf-btn:focus-visible { outline: 2px solid var(--bnf-focus-ring); outline-offset: 2px; }
.bnf-btn[disabled], .bnf-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Primary */
.bnf-btn--primary {
  background: var(--bnf-primary);
  color: var(--bnf-primary-on);
  border-color: var(--bnf-primary);
}
.bnf-btn--primary:hover { filter: brightness(0.92); }

/* Secondary (outline) */
.bnf-btn--secondary {
  background: transparent;
  color: var(--bnf-text);
  border-color: var(--bnf-border);
}
.bnf-btn--secondary:hover { background: var(--bnf-surface-elevated); border-color: var(--bnf-text-muted); }

/* Accent (Brand-Yellow — sparsam einsetzen!) */
.bnf-btn--accent {
  background: var(--bnf-accent);
  color: var(--bnf-accent-on);
  border-color: var(--bnf-accent);
}
.bnf-btn--accent:hover { filter: brightness(0.95); }

/* Destructive */
.bnf-btn--danger {
  background: var(--bnf-error);
  color: #FFFFFF;
  border-color: var(--bnf-error);
}
.bnf-btn--danger:hover { filter: brightness(0.92); }

/* === Form-Inputs ========================================================= */

.bnf-input,
.bnf-textarea,
.bnf-select {
  width: 100%;
  padding: var(--bnf-space-3) var(--bnf-space-4);
  font-family: var(--bnf-font-sans);
  font-size: var(--bnf-text-base);
  line-height: var(--bnf-leading-normal);
  color: var(--bnf-text);
  background: var(--bnf-surface);
  border: 1px solid var(--bnf-border);
  border-radius: var(--bnf-radius-md);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.bnf-input::placeholder,
.bnf-textarea::placeholder { color: var(--bnf-text-muted); }

.bnf-input:focus,
.bnf-textarea:focus,
.bnf-select:focus {
  outline: none;
  border-color: var(--bnf-focus-ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bnf-focus-ring) 25%, transparent);
}

.bnf-input[disabled] { color: var(--bnf-text-disabled); cursor: not-allowed; }

/* === Cards & Surfaces ==================================================== */

.bnf-card {
  background: var(--bnf-surface);
  border: 1px solid var(--bnf-border);
  border-radius: var(--bnf-radius-lg);
  padding: var(--bnf-space-6);
  box-shadow: var(--bnf-shadow-sm);
}

/* === Badges / Tags ======================================================= */

.bnf-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--bnf-space-1);
  padding: 2px var(--bnf-space-2);
  font-size: var(--bnf-text-xs);
  font-weight: var(--bnf-weight-medium);
  font-family: var(--bnf-font-mono);
  letter-spacing: var(--bnf-tracking-wide);
  text-transform: uppercase;
  border-radius: var(--bnf-radius-full);
  background: var(--bnf-surface-elevated);
  color: var(--bnf-text);
  border: 1px solid var(--bnf-border);
}

.bnf-badge--accent  { background: var(--bnf-accent);  color: var(--bnf-accent-on); border-color: transparent; }
.bnf-badge--success { background: color-mix(in srgb, var(--bnf-success) 18%, transparent); color: var(--bnf-success); border-color: transparent; }
.bnf-badge--warn    { background: color-mix(in srgb, var(--bnf-warn) 20%, transparent); color: var(--bnf-warn); border-color: transparent; }
.bnf-badge--error   { background: color-mix(in srgb, var(--bnf-error) 20%, transparent); color: var(--bnf-error); border-color: transparent; }

/* === Code / Mono ========================================================= */

code, kbd, samp {
  font-family: var(--bnf-font-mono);
  font-size: 0.92em;
  padding: 2px 6px;
  background: var(--bnf-surface-elevated);
  border: 1px solid var(--bnf-border);
  border-radius: var(--bnf-radius-sm);
}

pre {
  font-family: var(--bnf-font-mono);
  font-size: var(--bnf-text-sm);
  line-height: var(--bnf-leading-normal);
  padding: var(--bnf-space-4);
  background: var(--bnf-surface-elevated);
  border: 1px solid var(--bnf-border);
  border-radius: var(--bnf-radius-md);
  overflow-x: auto;
}

pre code {
  padding: 0;
  background: transparent;
  border: none;
}

/* === Hr ================================================================== */

hr {
  border: none;
  border-top: 1px solid var(--bnf-border);
  margin: var(--bnf-space-8) 0;
}

/* === Selection =========================================================== */

::selection {
  background: var(--bnf-accent);
  color: var(--bnf-accent-on);
}