/* Sondersystem — Brand Tokens
 * Quelle: sondersystem.de (:root-Variablen + Header-Logo), Stand 2026-10-05.
 * Hell = Standard (identisch zur Website). .theme-navy = zweiter Modus für Hooks/Kontrast.
 * Font-Pfade relativ zu dieser Datei — beim Kopieren in ein Projekt fonts/ mitkopieren.
 */

@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/HankenGrotesk-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: url("fonts/IBMPlexSerif-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: block;
}

:root {
  /* — Kernpalette (exakt von der Website) — */
  --ss-ink: #0b2545;        /* Primär: Headlines, Buttons, Logo, Navy-BG */
  --ss-brand: #0f2e5c;      /* Sekundär-Navy */
  --ss-accent: #2a5a9e;     /* Akzent: hervorgehobene Wörter, Links */
  --ss-text: #34425a;       /* Fließtext */
  --ss-muted: #5b6b82;      /* Labels, Meta */
  --ss-line: #e6e9ef;       /* Hairlines */
  --ss-panel: #f6f7f9;      /* Karten */
  --ss-surface: #f6f8fb;    /* Karten (bläulich) */
  --ss-page: #fbfbfa;       /* Seitenhintergrund */
  --ss-white: #ffffff;

  /* — Signalfarben (sparsam, nur als Status) — */
  --ss-ok: #16a34a;
  --ss-ok-text: #15803d;
  --ss-miss: #dc2626;
  --ss-highlight: #fff085;  /* Textmarker */

  /* — Semantische Rollen (Hell-Modus) — */
  --ss-bg: var(--ss-page);
  --ss-card: var(--ss-white);
  --ss-card-alt: var(--ss-panel);
  --ss-heading: var(--ss-ink);
  --ss-body: var(--ss-text);
  --ss-label: var(--ss-muted);
  --ss-em: var(--ss-accent);
  --ss-border: var(--ss-line);
  --ss-cta-bg: var(--ss-ink);
  --ss-cta-fg: var(--ss-white);

  /* — Typo — */
  --ss-font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ss-font-accent: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --ss-track-display: -0.04em;
  --ss-track-heading: -0.03em;
  --ss-track-ui: -0.01em;

  /* — Form & Tiefe — */
  --ss-radius-sm: 8px;
  --ss-radius-md: 12px;
  --ss-radius-lg: 16px;
  --ss-radius-pill: 999px;
  --ss-shadow-card: 0 1px 2px 0 #0b25452e, 0 6px 16px -6px #0b254559;
  --ss-shadow-float: 0 2px 6px 0 #0b25452e, 0 24px 48px -16px #0b25454d;
  --ss-shadow-btn: inset 0 -1.6px 1.6px 0 #0000002e, inset 0 1.6px 1.6px 0 #ffffff24,
    0 1px 2px 0 #0b25452e, 0 6px 16px -6px #0b254559;

  /* — Motion — */
  --ss-ease: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint */
  --ss-dur-ui: 180ms;
  --ss-dur-enter: 300ms;
}

/* Navy-Modus: für Hook-Frames, Kontrast-Ads, Endcards */
.theme-navy {
  --ss-bg: var(--ss-ink);
  --ss-card: var(--ss-brand);
  --ss-card-alt: #13366b;
  --ss-heading: #ffffff;
  --ss-body: rgba(255, 255, 255, 0.86);
  --ss-label: rgba(255, 255, 255, 0.68);
  --ss-em: #8fb3e8;
  --ss-border: rgba(255, 255, 255, 0.14);
  --ss-cta-bg: #ffffff;
  --ss-cta-fg: var(--ss-ink);
}

/* Signatur: einzelnes Schlüsselwort kursiv-serif (wie .lx-em auf der Website) */
.ss-em {
  font-family: var(--ss-font-accent);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.04em;
}
.ss-em-accent {
  color: var(--ss-em);
}