/* ============================================================================
   Haushubert Edel — Designsystem (Welle D, Stufe 1)
   Zentrales Token-Fundament. NOCH NICHT im Portal verdrahtet — nur Styleguide.
   Markenfarben programmatisch aus dem offiziellen Logo extrahiert:
     Petrol/Tiefblau  #2a4647   (Charakterfarbe, Logo-Hintergrund)
     Salbeigrün       #648462   (Akzent, Logo-Schrift + H-Monogramm)
   Abstufungen exakt abgeleitet (Mischung mit Weiß/Schwarz, gen-scale.js).
   Schrift: Inter — LOKAL gebündelt (public/vendor/fonts), KEIN Google-Fonts-CDN.
   ========================================================================== */

/* ── Lokale Schrift (variabel, ein Datei je Stil) ──────────────────────────── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/vendor/fonts/InterVariable.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/vendor/fonts/InterVariable-Italic.woff2') format('woff2');
}

:root {
  /* ── Markenpalette: Petrol (Anker #2a4647) ─────────────────────────────── */
  --brand-petrol-50:  #eef0f0;
  --brand-petrol-100: #dde1e2;
  --brand-petrol-200: #bbc4c4;
  --brand-petrol-300: #95a3a3;
  --brand-petrol-400: #667a7b;
  --brand-petrol-500: #445c5d;
  --brand-petrol-600: #2a4647; /* Markenanker */
  --brand-petrol-700: #253e3e;
  --brand-petrol-800: #1f3435;
  --brand-petrol-900: #182929;

  /* ── Markenpalette: Salbeigrün (Anker #648462) ─────────────────────────── */
  --brand-green-50:  #f0f3ef;
  --brand-green-100: #e0e6e0;
  --brand-green-200: #c4d0c3;
  --brand-green-300: #a5b8a4;
  --brand-green-400: #839d81;
  --brand-green-500: #648462; /* Markenanker */
  --brand-green-600: #587456;
  --brand-green-700: #4c644a;
  --brand-green-800: #3e523d;
  --brand-green-900: #303f2f;

  /* ── Neutrale Grautöne (leicht ins Petrol gekühlt, passt zur Marke) ────── */
  --neutral-0:   #ffffff;
  --neutral-25:  #fafbfb;
  --neutral-50:  #f4f6f6;
  --neutral-100: #eaeded;
  --neutral-200: #dde2e2;
  --neutral-300: #c4cccc;
  --neutral-400: #9aa5a5;
  --neutral-500: #646f6f; /* WCAG-AA: 5.2:1 auf Weiß (Muted-Text) */
  --neutral-600: #515c5c;
  --neutral-700: #3b4444;
  --neutral-800: #262d2d;
  --neutral-900: #161b1b;

  /* ── Semantische Status-Farben ─────────────────────────────────────────────
     NUR für UI-Status (Erfolg/Warnung/Fehler/Info). Bestandsbedeutungen wie
     Tonnen-Punktfarben (Abfallarten) und Objekt-Ampeln werden NICHT hierüber
     gesetzt und bleiben in dieser Welle unverändert. */
  --status-success:    #2e7d4f;
  --status-success-bg: #e7f4ec;
  --status-warning:    #b46e07;
  --status-warning-bg: #fbf0dd;
  --status-error:      #b3261e;
  --status-error-bg:   #fbe9e7;
  --status-info:       #2a6478;
  --status-info-bg:    #e3eef2;

  /* ── Typografie ────────────────────────────────────────────────────────── */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Code', Consolas, monospace;
  /* Skala (1.20 Minor Third), Basis 14px */
  --fs-xs:   11px;
  --fs-sm:   12.5px;
  --fs-base: 14px;
  --fs-md:   16px;
  --fs-lg:   19px;
  --fs-xl:   23px;
  --fs-2xl:  28px;
  --fs-3xl:  34px;
  --lh-tight:   1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --tracking-tight: -0.01em;
  --tracking-wide:   0.04em;

  /* ── Abstände (4px-Raster) ─────────────────────────────────────────────── */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px;

  /* ── Radien ─────────────────────────────────────────────────────────────── */
  --radius-xs: 4px;  --radius-sm: 6px;  --radius-md: 10px;
  --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px;

  /* ── Schatten (weich, ins Petrol gekühlt) ──────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(24,41,41,.06);
  --shadow-sm: 0 1px 3px rgba(24,41,41,.10), 0 1px 2px rgba(24,41,41,.06);
  --shadow-md: 0 4px 10px rgba(24,41,41,.10), 0 2px 4px rgba(24,41,41,.06);
  --shadow-lg: 0 10px 28px rgba(24,41,41,.14), 0 4px 10px rgba(24,41,41,.08);
  --shadow-focus: 0 0 0 3px var(--brand-green-200);
}

/* ============================================================================
   VARIANTEN — je ein semantisches Token-Set auf Basis derselben Markenfarben.
   Auf der Styleguide-Seite per [data-variant] umschaltbar. Fester heller Look,
   KEIN Dark Mode. Diese semantischen Tokens würden in Stufe 2 die Portal-Rollen
   bespielen — hier nur zur Vorschau.
   ========================================================================== */

/* ── Variante A — „Frisch & Hell": viel Weißraum, Grün als Akzent, ruhig ─── */
[data-variant="A"] {
  --app-bg:        var(--neutral-25);
  --surface:       var(--neutral-0);
  --surface-2:     var(--neutral-50);
  --border:        var(--neutral-200);
  --text:          var(--neutral-800);
  --text-muted:    var(--neutral-500);
  --heading:       var(--brand-petrol-700);

  --nav-bg:        var(--neutral-0);
  --nav-text:      var(--neutral-600);
  --nav-active-bg: var(--brand-green-50);
  --nav-active-text: var(--brand-green-700);
  --nav-border:    var(--neutral-200);

  --primary:       var(--brand-green-500);
  --primary-hover: var(--brand-green-600);
  --primary-text:  var(--neutral-0);
  --accent:        var(--brand-green-600);

  --header-bg:     var(--neutral-0);
  --header-text:   var(--brand-petrol-700);
  --card-shadow:   var(--shadow-sm);
  --focus-ring:    var(--brand-green-200);
}

/* ── Variante B — „Petrol-Premium": tiefes Blaugrün, edle Tiefe, kräftige Köpfe ── */
[data-variant="B"] {
  --app-bg:        var(--brand-petrol-50);
  --surface:       var(--neutral-0);
  --surface-2:     var(--brand-petrol-50);
  --border:        var(--brand-petrol-100);
  --text:          var(--brand-petrol-900);
  --text-muted:    var(--brand-petrol-400);
  --heading:       var(--brand-petrol-800);

  --nav-bg:        var(--brand-petrol-600);
  --nav-text:      var(--brand-petrol-100);
  --nav-active-bg: var(--brand-petrol-800);
  --nav-active-text: var(--neutral-0);
  --nav-border:    var(--brand-petrol-700);

  --primary:       var(--brand-petrol-600);
  --primary-hover: var(--brand-petrol-700);
  --primary-text:  var(--neutral-0);
  --accent:        var(--brand-green-500);

  --header-bg:     var(--brand-petrol-600);
  --header-text:   var(--neutral-0);
  --card-shadow:   var(--shadow-md);
  --focus-ring:    var(--brand-petrol-300);
}

/* ── Variante C — „Marken-Duo": Grün+Petrol als bewusster Zweiklang, lebendig ── */
[data-variant="C"] {
  --app-bg:        var(--neutral-25);
  --surface:       var(--neutral-0);
  --surface-2:     var(--brand-green-50);
  --border:        var(--neutral-200);
  --text:          var(--neutral-800);
  --text-muted:    var(--neutral-500);
  --heading:       var(--brand-petrol-700);

  --nav-bg:        var(--brand-petrol-600);
  --nav-text:      var(--brand-green-100);
  --nav-active-bg: var(--brand-green-600); /* AA: weiße Schrift 5.2:1 */
  --nav-active-text: var(--neutral-0);
  --nav-border:    var(--brand-petrol-700);

  --primary:       var(--brand-green-600); /* AA: weiße Schrift 5.2:1 */
  --primary-hover: var(--brand-green-700);
  --primary-text:  var(--neutral-0);
  --accent:        var(--brand-petrol-600);

  --header-bg:     linear-gradient(120deg, var(--brand-petrol-600), var(--brand-green-600));
  --header-text:   var(--neutral-0);
  --card-shadow:   var(--shadow-sm);
  --focus-ring:    var(--brand-green-200);
}