/*
 * Kummerkasten – Design-Tokens: dunkles Farbsystem, Typografie-/Abstandsskalen
 * (clamp(), fluide zwischen 320px und 4K), Bewegungs-Timing, lokale Schriftart.
 * Grundsätze: dunkle, ruhige Flächen mit Tiefe durch Licht statt Deko, ein
 * sattes Rot als einzige Markenfarbe, WCAG-AA-Kontraste (siehe Kommentare an
 * den jeweiligen Werten), Mobile-First.
 */

/* Inter (Fließtext, Überschriften, kinetische Wortmarke) - lokal gehostet
   unter assets/fonts/, keine Verbindung zu Google beim Seitenaufruf. Die
   Datei ist ein Variable Font (empirisch geprüft: Textbreite steigt
   durchgehend von Gewicht 100 bis 900), daher deckt ein einziger Schnitt
   den vollen Bereich ab - kein zusätzlicher Download nötig. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF;
}

:root {
  /* Flächen: nahes Schwarz statt Vollschwarz für Tiefe, zwei helle Stufen für
     Ebenen (Karten sitzen sichtbar "über" der Seite, wie in modernen
     Profi-Oberflächen). */
  --color-bg: #14151a;
  --color-surface: #1d1f24;
  --color-surface-2: #262830;

  /* Schrift: helles Grau/Weiß auf Dunkel. Kontraste geprüft: Ink 16.7:1,
     Ink-muted 8.1:1 gegen --color-bg (beide weit über AA-Text 4.5:1). */
  --color-ink: #f4f5f7;
  --color-ink-muted: #a9adb6;
  /* Nur für rein dekorative Zwecke (Platzhaltertext) - kein AA-Text-Anspruch. */
  --color-ink-faint: #6f737b;

  /* Rahmen: zwei Stufen. --color-border ist für funktionale Kanten (Eingabe-
     felder, Karten mit Bedeutung) auf 3.2-3.6:1 gegen --color-bg/--color-surface
     kalibriert (WCAG 1.4.11, Nicht-Text-Kontrast). --color-border-soft ist rein
     dekorativ (Trennlinien) und unterliegt keiner Kontrastpflicht. */
  --color-border: #6b6e75;
  --color-border-soft: #2c2e33;

  /* Marke: ein sattes Rot, konsequent als einzige Akzentfarbe. Die Button-
     Fläche nutzt einen dunkleren Ton (--color-accent-fill), weil weißer
     Text darauf 5.9:1 statt nur 3.7:1 mit dem helleren --color-accent
     erreicht - AA-Text statt nur AA-Large. */
  --color-accent: #ff2d3c;
  --color-accent-fill: #c8101f;
  --color-accent-fill-hover: #e5142a;
  --color-accent-soft: rgba(255, 45, 60, 0.14);

  /* Funktionsfarben bleiben bewusst von der Marke getrennt (Farbfehlsichtig-
     keit, und damit eine Fehlermeldung nie mit dem Markenrot verwechselt
     wird): Erfolg/Warnung bleiben grün/amber, "Gefahr/Fehler" bekommt einen
     eigenen, orange-korallenfarbenen Ton statt des Markenrots. */
  --color-success-bg: rgba(51, 209, 122, 0.14);
  --color-success-ink: #33d17a;
  --color-warning-bg: rgba(245, 179, 66, 0.14);
  --color-warning-ink: #f5b342;
  --color-danger-bg: rgba(255, 138, 92, 0.14);
  --color-danger-ink: #ff8a5c;

  /* Typografie: durchgehend Sans-Serif. Inter zuerst, Systemstack als
     Rückfall - deckt sowohl "Arial-ähnlich" als auch native Rendering-
     Qualität auf jedem Betriebssystem ab. */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-body: clamp(1rem, 0.97rem + 0.1vw, 1.0625rem);
  --fs-small: clamp(0.85rem, 0.83rem + 0.1vw, 0.9rem);
  --fs-lede: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
  --fs-h3: clamp(1.1rem, 1.03rem + 0.5vw, 1.3rem);
  --fs-h2: clamp(1.35rem, 1.2rem + 1vw, 1.85rem);
  --fs-h1: clamp(1.95rem, 1.5rem + 2.4vw, 3.2rem);
  /* Minimum bewusst niedriger als andere Überschriften: die kinetische
     Wortmarke erzwingt pro Wort white-space:nowrap (kein Umbruch mitten im
     Wort) - bei 320px muss daher selbst das längste Wort ("Kummerkasten")
     innerhalb der Content-Breite bleiben, sonst würde es von overflow-x:
     hidden unsichtbar abgeschnitten statt sichtbar umzubrechen. */
  --fs-hero: clamp(2.2rem, 1.4rem + 5vw, 5rem);

  /* Abstände (fluide) */
  --space-3xs: 0.25rem;
  --space-2xs: clamp(0.4rem, 0.35rem + 0.2vw, 0.5rem);
  --space-xs: clamp(0.6rem, 0.5rem + 0.4vw, 0.85rem);
  --space-sm: clamp(0.9rem, 0.75rem + 0.6vw, 1.25rem);
  --space-md: clamp(1.4rem, 1.1rem + 1.2vw, 2.25rem);
  --space-lg: clamp(2.2rem, 1.6rem + 2.4vw, 3.75rem);
  --space-xl: clamp(3.2rem, 2rem + 4.5vw, 6.5rem);

  /* Layout */
  --max-width: 46rem;
  --max-width-wide: 68rem;
  --max-width-stage: 100rem;
  --radius: 0.6rem;
  --radius-lg: 1rem;
  --radius-full: 999px;

  /* Tiefe: auf Dunkel wirken Schatten allein kaum, deshalb kombiniert mit
     einem dezenten hellen Inset-Highlight (Glasflächen-Charakter, wie im
     Referenz-Dashboard). --shadow-glow ist der satte Rot-Schein für
     Hover/Fokus auf CTAs. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  --shadow-md: 0 12px 28px -10px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-lg: 0 28px 56px -18px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-focus: 0 0 0 3px rgba(255, 45, 60, 0.35);
  --shadow-glow: 0 8px 24px -6px rgba(255, 45, 60, 0.45);

  /* Bewegung: ruhige, spürbare Kurve statt technischer linear/ease-Standards */
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 160ms;
  --duration-base: 280ms;
  --duration-slow: 700ms;
}

@media (min-width: 640px) {
  :root {
    --radius: 0.75rem;
  }
}