/* ============================================================
   LAVA Design Tokens
   ------------------------------------------------------------
   Single source of truth fuer LAVA-Branding in allen AIRA-Frontends
   (Prozessdatenbank v2, KPI-Dashboard, Wissens-LLM-UI, ...).

   Quelle Farben + Schrift: 00_Meta/Vorlagen/LAVA-Design.thmx
     -> ppt/theme/theme1.xml (Color Scheme "LAVA-Energy_Colors",
        Font Scheme "LAVA-Energy_Font").
   Quelle Polish (Shadows/Radii/Transitions): KPI-Dashboard
     04_KPI_Dashboard/01_Datenraum_LAVA/KPI/index.html.

   Aenderungen am Branding bitte ZUERST hier machen, dann konsumieren.
   Keine Hex-Codes in Komponenten haerten - immer var(--token) nutzen.
   ============================================================ */

/* Roboto: gleiche Gewichte wie KPI-Dashboard. Wenn Frontend offline
   laufen soll, Schrift selbst hosten und diesen @import entfernen. */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

:root {
  /* ----------------------------------------------------------
     1. Brand-Palette (1:1 aus theme1.xml)
     ---------------------------------------------------------- */
  --lava-orange:        #E74011;  /* accent1 - Primaerakzent, Marke */
  --lava-orange-light:  #F5B3A2;  /* accent2 */
  --lava-teal:          #155D69;  /* accent3 - Daten/Links, Sekundaer */
  --lava-teal-light:    #A1BEC3;  /* accent4 */
  --lava-green:         #409942;  /* accent5 - Erfolg/Positiv */
  --lava-green-light:   #B3D6B3;  /* accent6 */

  /* Erweiterungen (KPI-Dashboard, konsistent abgeleitet) */
  --lava-orange-dark:   #C3360E;  /* hover/pressed States */
  --lava-orange-bg:     #FDECE6;  /* dezenter Highlight-Hintergrund */
  --lava-teal-dark:     #0D3B43;
  --lava-teal-pale:     #E5EEF0;  /* Selection/Active-Sidebar */
  --lava-warning:       #E2A900;  /* KPI-Ampel gelb */
  --lava-warning-bg:    #FFF6D9;
  --lava-danger:        #C62828;  /* Error-Toasts (kontrastreicher als Orange) */
  --lava-danger-bg:     #FBEAEA;

  /* ----------------------------------------------------------
     2. Neutrals (dk1/lt1/dk2/lt2 + KPI-Dashboard-Skala)
     ---------------------------------------------------------- */
  --lava-text:          #0F1B2D;  /* primaere Schrift, KPI-Konvention */
  --lava-text-soft:     #505450;  /* dk1 aus theme1.xml */
  --lava-text-muted:    #6B7682;
  --lava-text-faint:    #B9BBB9;  /* dk2 aus theme1.xml */

  --lava-bg:            #F6F7F8;  /* App-Hintergrund */
  --lava-surface:       #FFFFFF;  /* Karten/Panels */
  --lava-surface-alt:   #FAFBFC;  /* Tabellen-Header, sub Surface */
  --lava-border:        #EAECEE;
  --lava-border-strong: #B9BDC2;

  /* ----------------------------------------------------------
     3. Semantische Aliase
        Komponenten sollten DIESE benutzen, nicht die Brand-Tokens
        direkt - dann laesst sich Theming spaeter aendern.
     ---------------------------------------------------------- */
  --color-primary:      var(--lava-orange);
  --color-primary-dark: var(--lava-orange-dark);
  --color-primary-bg:   var(--lava-orange-bg);

  --color-secondary:    var(--lava-teal);
  --color-secondary-bg: var(--lava-teal-pale);

  --color-link:         var(--lava-teal);        /* hlink aus theme1.xml */
  --color-link-visited: var(--lava-orange);      /* folHlink aus theme1.xml */

  --color-success:      var(--lava-green);
  --color-success-bg:   #E8F2E8;
  --color-warning:      var(--lava-warning);
  --color-warning-bg:   var(--lava-warning-bg);
  --color-danger:       var(--lava-danger);
  --color-danger-bg:    var(--lava-danger-bg);

  --color-text:         var(--lava-text);
  --color-text-muted:   var(--lava-text-muted);
  --color-bg:           var(--lava-bg);
  --color-surface:      var(--lava-surface);
  --color-border:       var(--lava-border);

  /* ----------------------------------------------------------
     4. Typografie
     ---------------------------------------------------------- */
  --font-sans: "Roboto", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 14px;
  --fs-md:   15px;
  --fs-lg:   17px;
  --fs-xl:   20px;
  --fs-2xl:  24px;
  --fs-3xl:  30px;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-bold:     700;
  --fw-black:    900;

  --lh-tight: 1.25;
  --lh-base:  1.55;

  --letter-uppercase: 0.08em;  /* fuer Tabellen-Header / Eyebrow-Labels */
  --letter-tight:     -0.005em;

  /* ----------------------------------------------------------
     5. Spacing (4px-Raster)
     ---------------------------------------------------------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ----------------------------------------------------------
     6. Radien, Schatten, Transitions (KPI-Dashboard Polish)
     ---------------------------------------------------------- */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(15,27,45,.04);
  --shadow-sm: 0 1px 3px rgba(15,27,45,.06), 0 1px 2px rgba(15,27,45,.04);
  --shadow-md: 0 4px 14px rgba(15,27,45,.08), 0 1px 3px rgba(15,27,45,.04);
  --shadow-lg: 0 10px 30px rgba(15,27,45,.10), 0 2px 6px rgba(15,27,45,.05);

  --tr-fast: 0.12s ease;
  --tr-md:   0.20s ease;
  --tr-slow: 0.30s ease;

  /* ----------------------------------------------------------
     7. Layout-Konstanten
     ---------------------------------------------------------- */
  --layout-header-h:  50px;
  --layout-sidebar-w: 240px;
  --layout-max-w:     1100px;
}

/* ============================================================
   Basis-Reset + Typo - bewusst minimal.
   Wenn ein Frontend mehr braucht, eigene CSS oben drauf legen.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  letter-spacing: var(--letter-tight);
  color: var(--color-text);
  background: var(--color-bg);
  font-feature-settings: "tnum" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--tr-fast);
}
a:hover    { color: var(--color-primary); }
a:visited  { color: var(--color-link-visited); }

/* Scrollbar wie KPI-Dashboard - subtil, gleiche Farbfamilie */
::-webkit-scrollbar       { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb {
  background: var(--lava-border-strong);
  border-radius: 8px;
  border: 2px solid var(--color-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--lava-text-muted); }

/* ============================================================
   Utility-Klassen - klein gehalten. Komponenten lieber semantisch.
   ============================================================ */
.lava-eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--letter-uppercase);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.lava-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.lava-btn {
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--tr-fast);
}
.lava-btn--primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.lava-btn--primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.lava-btn--ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.lava-btn--ghost:hover { background: var(--color-secondary-bg); border-color: var(--color-secondary); color: var(--color-secondary); }