/* bitte.help — Web-Token
 *
 * Erzeugt aus src/tokens.css (U2 des Rebrand-Plans). Identisch in den Werten,
 * verschieden in einer Sache: die Schrift kommt aus dem eigenen Verzeichnis,
 * nicht von Google. Die neue Seite setzt `font-src 'self'`, ein entfernter
 * Import wird dort blockiert und die Seite fällt still auf Helvetica zurück.
 *
 * Erwartet die Dateien unter /fonts/. Siehe HANDOFF.md.
 */

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

:root {
  /* ---- Rohpalette · Marke ------------------------------------------- */
  --bh-ink: #172B6B;
  --bh-action: #2E52C4;
  --bh-action-soft: #8FA6F2;
  --bh-urgent: #C9542F;

  /* ---- Rohpalette · Hell ------------------------------------------- */
  --bh-paper: #F4F2ED;
  --bh-surface: #FFFFFF;
  --bh-surface-sunk: #ECE9E1;
  --bh-text: #14161C;
  --bh-text-body: #4A4945;
  --bh-text-muted: #6B6A66;
  --bh-line: #DCD9D2;

  /* ---- Rohpalette · Dunkel ----------------------------------------- */
  --bh-dark-bg: #0E1016;
  --bh-dark-surface: #171A24;
  --bh-dark-surface-2: #1F2432;
  --bh-dark-border: #2A2F3D;
  --bh-dark-line: #262B38;
  --bh-dark-muted: #8A8FA0;

  /* ---- Rohpalette · Schrift auf Tintenblau ------------------------- */
  --bh-on-ink-body: #C6D0EE;
  --bh-on-ink-muted: #A9B4DC;
  --bh-on-ink-line: #3B4E88;

  /* ---- Diagrammreihe ---------------------------------------------- */
  --bh-series-1: #DCE2F5;
  --bh-series-2: #8FA6F2;
  --bh-series-3: #2E52C4;
  --bh-series-4: #172B6B;

  /* ---- Schrift ---------------------------------------------------- */
  --bh-font-sans: Archivo, Helvetica, Arial, sans-serif;
  --bh-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Typostufen · acht, keine neunte ----------------------------- */
  --bh-display-size: 44px;   --bh-display-weight: 600; --bh-display-track: -0.03em;  --bh-display-lead: 1.05;
  --bh-title-size: 30px;     --bh-title-weight: 600;   --bh-title-track: -0.025em;   --bh-title-lead: 1.15;
  --bh-headline-size: 19px;  --bh-headline-weight: 600;--bh-headline-track: -0.01em; --bh-headline-lead: 1.25;
  --bh-body-size: 17px;      --bh-body-weight: 400;    --bh-body-track: 0;           --bh-body-lead: 1.45;
  --bh-item-size: 17px;      --bh-item-weight: 500;    --bh-item-track: 0;           --bh-item-lead: 1.3;
  --bh-label-size: 15px;     --bh-label-weight: 500;   --bh-label-track: 0;          --bh-label-lead: 1.3;
  --bh-caption-size: 13px;   --bh-caption-weight: 400; --bh-caption-track: 0;        --bh-caption-lead: 1.5;
  --bh-meta-size: 11px;      --bh-meta-weight: 500;    --bh-meta-track: 0.1em;       --bh-meta-lead: 1;

  /* Untergrenze für Fließtext. Kleiner wird nur Mono-Metatext. */
  --bh-body-floor: 15px;

  /* ---- Abstände · Raster 4 ---------------------------------------- */
  --bh-space-4: 4px;
  --bh-space-8: 8px;
  --bh-space-10: 10px;
  --bh-space-12: 12px;
  --bh-space-16: 16px;
  --bh-space-20: 20px;
  --bh-space-24: 24px;
  --bh-space-64: 64px;

  /* ---- Rundungen -------------------------------------------------- */
  --bh-radius-tag: 4px;
  --bh-radius-web: 8px;
  --bh-radius-soft: 10px;
  --bh-radius-secondary: 12px;
  --bh-radius-card: 14px;
  --bh-radius-pill: 22px;
  --bh-radius-bar: 26px;
  --bh-radius-round: 50%;

  --bh-motion: 160ms ease-out;
  --bh-hit: 44px;
}

/* ---- Rollen · Hell (Vorgabe) -------------------------------------- */
.bh-root,
[data-ton="hell"] {
  --bh-bg: var(--bh-paper);
  --bh-card: var(--bh-surface);
  --bh-card-sunk: var(--bh-surface-sunk);
  --bh-card-border-color: var(--bh-line);
  --bh-card-border-width: 1px;
  --bh-fg: var(--bh-text);
  --bh-fg-body: var(--bh-text-body);
  --bh-fg-muted: var(--bh-text-muted);
  --bh-border: var(--bh-line);
  --bh-divider: var(--bh-line);
  --bh-link: var(--bh-action);
  --bh-knob-off: var(--bh-surface);
  --bh-track-off: var(--bh-line);
  --bh-brand-dot: var(--bh-ink);
  --bh-bubble-fremd: var(--bh-surface);
  --bh-bubble-fremd-border-color: var(--bh-line);
  --bh-bubble-fremd-border-width: 1px;
}

/* ---- Rollen · Dunkel --------------------------------------------- */
[data-ton="dunkel"] {
  --bh-bg: var(--bh-dark-bg);
  --bh-card: var(--bh-dark-surface);
  --bh-card-sunk: var(--bh-dark-surface-2);
  --bh-card-border-color: transparent;
  --bh-card-border-width: 0px;
  --bh-fg: var(--bh-paper);
  --bh-fg-body: var(--bh-paper);
  --bh-fg-muted: var(--bh-dark-muted);
  --bh-border: var(--bh-dark-border);
  --bh-divider: var(--bh-dark-line);
  --bh-link: var(--bh-action-soft);
  --bh-knob-off: var(--bh-dark-muted);
  --bh-track-off: var(--bh-dark-border);
  --bh-brand-dot: var(--bh-action-soft);
  --bh-bubble-fremd: var(--bh-dark-surface-2);
  --bh-bubble-fremd-border-color: transparent;
  --bh-bubble-fremd-border-width: 0px;
}