/* ============================================================
   DESIGN-VARIANTE: ROT
   Interne Bezeichnung, keine Firmennamen im Code. Überschreibt
   Farb-/Typo-Tokens von app.css. Nach app.css geladen.
   ============================================================ */

:root {
  --brand: #d72622;
  --brand-dark: #b7201d;
  --brand-darker: #8f1916;
  --brand-soft: #fbe6e5;
  --brand-softer: #fdf3f2;

  --ink: #17181a;
  --ink-2: #2a2c2f;

  --amber: #c0830b;
  --amber-soft: #fbf0dc;
  --sage: #3a8f5c;
  --sage-soft: #e7f3ec;
  --rose: #7a1030;
  --rose-soft: #f6e6ec;

  --sh-focus: 0 0 0 3px rgba(215, 38, 34, 0.24);

  --font-display: 'Oswald', Arial, sans-serif;
  --font-body: 'Roboto', Arial, sans-serif;
}

html[data-theme="dark"] {
  --brand: #ff4d48;
  --brand-dark: #d72622;
  --brand-soft: rgba(255, 77, 72, 0.14);
  --brand-softer: rgba(255, 77, 72, 0.07);
  --ink: #f2f2f1;
  --ink-2: #d6d6d4;

  --amber: #d8a23a;
  --amber-soft: rgba(216, 162, 58, 0.14);
  --rose: #e0507a;
  --rose-soft: rgba(224, 80, 122, 0.14);
}

#login {
  --lg2-bg1: #ffffff; --lg2-bg2: #f5f5f5;
  --lg2-aside: #f7f7f7; --lg2-aside-line: #e6e6e6;
  --lg2-card: #ffffff; --lg2-card-brd: #e6e6e6;
  --lg2-ink: #17181a; --lg2-muted: #62676d;
  --lg2-line: #d72622; --lg2-line-soft: rgba(215, 38, 34, .38);
  --lg2-glow: rgba(215, 38, 34, .14);
  --lg2-chip-bg: rgba(255,255,255,.95); --lg2-chip-brd: #e6e6e6;
}

body { font-family: var(--font-body); }

.lg2-title,
.lg2-card-hd h2 {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-variation-settings: normal;
}

.lg2-eyebrow,
.lg2-feat-h,
.lg2-metric-l {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.lg-feat-h,
.section-title,
h1, h2, h3 {
  font-variation-settings: normal;
}

button, .btn, .app-iconbtn, input[type="submit"] {
  font-family: var(--font-body);
}
.btn-primary, button[type="submit"], .lg2-cta {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}