/* ============================================================
   moepe — Design-System-Tokens
   Dach-/Holding-Identität · neutral, professionell, ruhig
   Richtung: Graphit (Primär) + Amber (Akzent)
   ------------------------------------------------------------
   Eine Quelle der Wahrheit für Farben, Typografie, Abstände,
   Radien und Schatten. In jede Sicht (Tenant- und Dachsicht)
   einbinden. Tenant-Kennfarben sind als Platzhalter markiert
   und über je eine Variable austauschbar.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- Marke: Graphit (Primär) ---------- */
  --brand-900: #11151a;
  --brand-800: #181d24;
  --brand-700: #20262e;   /* primäre Markenfläche (Header dunkel, Sidebar) */
  --brand-600: #2a323b;
  --brand-500: #3a444f;
  --brand-400: #56626e;

  --brand:      var(--brand-700);
  --brand-ink:  #f4f6f8;  /* Text auf Graphitfläche */

  /* ---------- Akzent: Amber (sparsam, CTAs/aktive Zustände) ---------- */
  --accent-50:  #fbf3e6;
  --accent-100: #f5e3c4;
  --accent-200: #eccb8f;
  --accent-300: #ddac5e;
  --accent-400: #cd9440;
  --accent-500: #bf7d2e;  /* Basis-Akzent */
  --accent-600: #a4671f;
  --accent-700: #82511a;

  --accent:        var(--accent-500);
  --accent-ink:    #1c1305;  /* Text auf Amberfläche */
  --accent-soft:   var(--accent-50);

  /* ---------- Neutrale Graustufen (kühl, graphitgetönt) ---------- */
  --gray-0:   #ffffff;
  --gray-25:  #f7f8fa;   /* App-Hintergrund */
  --gray-50:  #f1f3f6;   /* Fläche alt / Zebra */
  --gray-100: #e7eaee;   /* Linien hell, Tabellen-Trenner */
  --gray-200: #d6dbe1;   /* Rahmen / Border */
  --gray-300: #b9c1ca;   /* Border stark / disabled */
  --gray-400: #939ba6;   /* Caption / Hilfetext */
  --gray-500: #6c757f;   /* Sekundärtext */
  --gray-600: #4d565f;   /* Body */
  --gray-700: #353d45;   /* Body stark */
  --gray-800: #232a31;   /* Überschriften */
  --gray-900: #151a1f;   /* tiefster Text */

  /* ---------- Semantik (Dashboard-Status) ---------- */
  --success-600: #2f8a5b;  --success-500: #38a06b;  --success-50: #e6f4ec;  --success-ink:#0f3e27;
  --warning-600: #b9871a;  --warning-500: #d4a017;  --warning-50: #fbf2d9;  --warning-ink:#4d3a06;
  --danger-600:  #bb3b34;  --danger-500:  #cf4a43;  --danger-50:  #fbe9e8;  --danger-ink: #4d1512;
  --info-600:    #356a93;  --info-500:    #4180ad;  --info-50:    #e8f0f6;  --info-ink:   #123047;

  /* ---------- Tenant-Kennfarben (echte Markenfarben) ----------
     Einsatz: Wegweiser/Chips, Akzentleiste im Header, Punkt vor Tenant-Zeilen.
     NICHT als Flächen-Dominanz. Je Tenant nur diese eine Variable tauschen.
     tauernbreeze: TauernBreeze-Markenbuch (Tauern-Blau --primary #005477).
     hth: HTH-Projekt (helleres Blau --hell-Familie #6aa9d8).
     tauernstays: tauernstays globals.css (Sommer-Akzent Emerald #047857).
     cicerone: Cicerone-Designsystem (--pomodoro #BF4528). */
  --tenant-tauernbreeze: #005477;  /* Tauern-Blau        */
  --tenant-hth:          #6aa9d8;  /* HTH-Hellblau       */
  --tenant-tauernstays:  #047857;  /* Emerald            */
  --tenant-cicerone:     #bf4528;  /* Cicerone Pomodoro  */
  --tenant-moepe:        var(--brand-700); /* Dachsicht = neutral graphit */

  /* ---------- Typografie ---------- */
  --font-ui:   'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --text-2xs: 10.5px;  /* Mikro-Label, gesperrt */
  --text-xs:  11.5px;  /* Caption, Tabellen-Kopf */
  --text-sm:  12.5px;  /* Tabellen-Sekundär */
  --text-base:13.5px;  /* Body / Tabellenzelle */
  --text-md:  15px;    /* hervorgehobener Body */
  --text-lg:  17px;    /* Abschnittstitel */
  --text-xl:  20px;    /* Karten-/Panel-Titel */
  --text-2xl: 24px;    /* Seitentitel */
  --text-3xl: 30px;    /* KPI mittel */
  --text-4xl: 38px;    /* KPI groß */

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-body:  1.5;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   800;

  --tracking-label: 0.06em;  /* gesperrte Mikro-Label */
  --tracking-tight: -0.01em;

  /* ---------- 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: 9px;
  --radius-lg: 13px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  /* ---------- Schatten (dezent, professionell) ---------- */
  --shadow-xs: 0 1px 2px rgba(16,22,30,.06);
  --shadow-sm: 0 1px 2px rgba(16,22,30,.05), 0 2px 5px rgba(16,22,30,.06);
  --shadow-md: 0 4px 14px rgba(16,22,30,.09);
  --shadow-lg: 0 16px 40px rgba(16,22,30,.14);
  --ring-accent: 0 0 0 3px rgba(191,125,46,.30);
  --ring-focus:  0 0 0 3px rgba(65,128,173,.32);

  /* ---------- Shell-Maße ---------- */
  --sidebar-w: 248px;
  --header-h: 60px;
}