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

:root {
  --brand: #00a09d;
  --brand-dark: #005f5a;
  --brand-darker: #003d3a;
  --brand-soft: #e2f4f3;
  --brand-softer: #f1faf9;

  --ink: #000000;
  --ink-2: #1c1c1c;

  --amber: #f08264;
  --amber-soft: #fdece6;
  --sage: #8ba33a;
  --sage-soft: #eef3df;
  --rose: #c0392b;
  --rose-soft: #fbeaea;

  --sh-focus: 0 0 0 3px rgba(0, 160, 157, 0.28);

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

html[data-theme="dark"] {
  --brand: #00c2be;
  --brand-dark: #00a09d;
  --brand-soft: rgba(0, 194, 190, 0.14);
  --brand-softer: rgba(0, 194, 190, 0.07);
  --ink: #f4f4f2;
  --ink-2: #d6d6d2;

  --amber: #f08264;
  --amber-soft: rgba(240, 130, 100, 0.14);
  --sage: #b4c850;
  --sage-soft: rgba(180, 200, 80, 0.14);
}

#login {
  --lg2-bg1: #ffffff; --lg2-bg2: #f2f2f0;
  --lg2-aside: #f7f7f5; --lg2-aside-line: #e2e2de;
  --lg2-card: #ffffff; --lg2-card-brd: #e2e2de;
  --lg2-ink: #000000; --lg2-muted: #55585a;
  --lg2-line: #00a09d; --lg2-line-soft: rgba(0, 160, 157, .38);
  --lg2-glow: rgba(0, 160, 157, .14);
  --lg2-chip-bg: rgba(255,255,255,.95); --lg2-chip-brd: #dcdcd8;
}

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

.lg2-title,
.lg2-card-hd h2 {
  font-weight: 900;
  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: 700;
  letter-spacing: 0.06em;
}

.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: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}