@font-face {
  font-family: "Titling Gothic";
  src: url("../fonts/TitlingGothicFBCond-Bold.6478eaee5157.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Titling Gothic Narrow";
  src: url("../fonts/TitlingGothicFBNar-Reg.65ee047325b3.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --color-red: #ff0000;
  --color-red-dark: #d90000;
  --color-black: #0d0d0d;
  --color-grey-950: #181818;
  --color-grey-800: #333333;
  --color-grey-600: #666666;
  --color-grey-500: #6b6b6b;
  --color-grey-300: #c9c9c9;
  --color-grey-200: #dedede;
  --color-grey-100: #eeeeec;
  --color-offwhite: #f8f8f6;
  --color-white: #ffffff;
  --color-error-bg: #fff0f0;
  --color-error-text: #8c1010;
  --color-error-border: #f3b4b4;
  --color-success-border: #4d805c;

  /* Status-Token-Map (B-7): benannte Statusfarben statt Roh-Hex in app.css. */
  --status-success: #247337;
  --status-success-bg: #e8f5ea;
  --status-damage: #b1502a;
  --status-damage-bg: #fbede7;
  --status-warning: #8a6c1a;
  --status-warning-bg: #fbf3dd;
  --status-info: #174f83;
  --status-info-bg: #edf5fc;

  --font-display: "Titling Gothic", "Arial Narrow", sans-serif;
  --font-heading: "Titling Gothic Narrow", "Arial Narrow", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;

  /* UX-48: Icon-Groessenstufen (Zwischenwerte auf naechste Stufe gerundet). */
  --icon-sm: 14px;
  --icon-md: 18px;
  --icon-lg: 28px;

  --shadow-card: 0 24px 60px rgb(0 0 0 / 45%);
  --shadow-control: 0 1px 3px rgb(0 0 0 / 12%);
  --focus-ring: 0 0 0 3px rgb(255 0 0 / 28%);

  /* GF-29: Responsive-Breakpoints (dokumentierte Konvention — Plain-CSS
     @media kann kein var() lesen, daher als Literale in app.css verwenden).
     Regime:  Phone <600  |  Tablet-hoch 600-899  |  Tablet-quer 900-1279  |  Desktop >=1280
     Struktureller Content-Spaltenwechsel NUR bei 900px. 600px steuert nur Dichte. */
  --bp-sm: 600px;   /* Phone -> Tablet-hoch (Dichte) */
  --bp-md: 900px;   /* Tablet-hoch -> Tablet-quer (Struktur) */
  --bp-lg: 1280px;  /* Tablet-quer -> Desktop */
}