/* ==========================================================================
   LKconnect Design Tokens · v1.0 (2026-08)
   Quelle der Wahrheit für alle LKconnect-Apps (Dashboard, Second Brain,
   Review-Agent, Website). In jeder App als erstes importieren.
   ========================================================================== */

/* --- Fonts (Google Fonts, self-host in Prod empfohlen) -------------------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* --- Markenfarben (aus dem Logo) -------------------------------------- */
  --lk-logo-green:   #3B961C;   /* Nur im Logo und als Knoten-Signal – nicht für UI-Flächen */
  --lk-moss:         #3F5E33;   /* Moss – Primärfarbe der UI */
  --lk-moss-deep:    #2C4424;   /* Hover / Pressed */
  --lk-moss-soft:    #E4EBDD;   /* Badges, Erfolgsflächen, Active-Nav */
  --lk-moss-tint:    #F2F5EE;   /* Hover-Rows, Selected-State leicht */
  --lk-green:        var(--lk-moss);
  --lk-green-deep:   var(--lk-moss-deep);
  --lk-green-soft:   var(--lk-moss-soft);
  --lk-green-tint:   var(--lk-moss-tint);
  --lk-ink:          #151C1D;   /* Wordmark-Schwarz, Primärtext */

  /* --- Neutrals (kühl, leicht grünstichig – kein warmes Creme) ----------- */
  --lk-paper:        #F6F7F3;   /* App-Hintergrund hell */
  --lk-white:        #FFFFFF;   /* Cards, Inputs */
  --lk-mist:         #E1E5DE;   /* Borders, Divider */
  --lk-mist-strong:  #C5CCC0;   /* Border bei Hover/Focus-Ring-Basis */
  --lk-slate:        #5F6A5E;   /* Sekundärtext, Labels */
  --lk-slate-light:  #8C968A;   /* Placeholder, Disabled-Text */

  /* --- Zweiter Akzent: Knoten-Teal (Links, Info, Diagramm-Serie 2) ------- */
  --lk-teal:         #2E5F63;   /* Pine – gedämpft, passend zu Moss */
  --lk-teal-soft:    #DEE9EA;

  /* --- Semantik ----------------------------------------------------------- */
  --lk-success:      var(--lk-logo-green);  /* Erfolg darf das helle Logo-Grün tragen */
  --lk-success-bg:   #E3F2DC;
  --lk-warning:      #C98A00;
  --lk-warning-bg:   #FBF1D6;
  --lk-danger:       #C2361F;
  --lk-danger-bg:    #FAE3DE;
  --lk-info:         var(--lk-teal);
  --lk-info-bg:      var(--lk-teal-soft);

  /* --- Semantische Aliasse (diese in Komponenten verwenden!) ------------- */
  --bg:              var(--lk-paper);
  --bg-elevated:     var(--lk-white);
  --bg-muted:        #EDF0E9;
  --fg:              var(--lk-ink);
  --fg-muted:        var(--lk-slate);
  --fg-subtle:       var(--lk-slate-light);
  --border:          var(--lk-mist);
  --border-strong:   var(--lk-mist-strong);
  --primary:         var(--lk-green);
  --primary-hover:   var(--lk-green-deep);
  --primary-fg:      #FFFFFF;
  --accent:          var(--lk-teal);
  --ring:            rgba(63, 94, 51, 0.35);

  /* --- Typografie --------------------------------------------------------- */
  --font-display:    'Montserrat', system-ui, sans-serif;     /* Überschriften – verwandt mit dem Wordmark, max. 700 */
  --font-body:       'IBM Plex Sans', system-ui, sans-serif;  /* Fließtext, UI */
  --font-mono:       'IBM Plex Mono', ui-monospace, monospace;/* Zahlen, Zeiten, IDs */

  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg:   1.125rem;  /* 18 */
  --text-xl:   1.375rem;  /* 22 */
  --text-2xl:  1.75rem;   /* 28 */
  --text-3xl:  2.25rem;   /* 36 */
  --text-4xl:  3rem;      /* 48 */

  --leading-tight: 1.15;
  --leading-snug:  1.3;
  --leading-base:  1.5;

  --tracking-display: -0.02em;
  --tracking-label:   0.06em;   /* Eyebrows / Uppercase-Labels */

  /* --- Abstände (4er-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-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* --- Schatten (flach, kühl) --------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(21, 28, 29, 0.06);
  --shadow-md: 0 2px 8px rgba(21, 28, 29, 0.08), 0 1px 2px rgba(21, 28, 29, 0.04);
  --shadow-lg: 0 8px 24px rgba(21, 28, 29, 0.12);

  /* --- Motion ------------------------------------------------------------- */
  --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;

  /* --- Layout ------------------------------------------------------------- */
  --container-max: 1200px;
  --sidebar-w:     256px;
  --topbar-h:      56px;

  color-scheme: light;
}

/* --- Dark Mode --------------------------------------------------------- */
:root[data-theme="dark"],
.dark {
  --bg:              #111512;
  --bg-elevated:     #181E19;
  --bg-muted:        #202822;
  --fg:              #F2F5F3;
  --fg-muted:        #A7B0AD;
  --fg-subtle:       #6F7A77;
  --border:          #2A3234;
  --border-strong:   #3A4446;
  --primary:         #8DB07A;   /* Moss aufgehellt für Dunkel */
  --primary-hover:   #A3C491;
  --primary-fg:      #111512;
  --accent:          #7FAEB2;
  --ring:            rgba(141, 176, 122, 0.45);

  --lk-success:      #6CC24A;
  --lk-warning:      #E6A91F;
  --lk-danger:       #E8715A;
  --lk-info:         #7FAEB2;
  --lk-green-soft:   #27351F;
  --lk-green-tint:   #1C261A;
  --lk-success-bg:   #1E3A14;
  --lk-teal-soft:    #1C3133;
  --lk-warning-bg:   #3A2E0E;
  --lk-danger-bg:    #3E1912;
  --lk-success-bg:   #E3F2DC;
  --lk-info-bg:      var(--lk-teal-soft);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.6);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111512; --bg-elevated: #181E19; --bg-muted: #202822;
    --fg: #F2F5F3; --fg-muted: #A7B0AD; --fg-subtle: #6F7A77;
    --border: #2A3234; --border-strong: #3A4446;
    --primary: #8DB07A; --primary-hover: #A3C491; --primary-fg: #111512;
    --accent: #7FAEB2; --ring: rgba(141,176,122,0.45);
    --lk-success: #6CC24A; --lk-warning: #E6A91F; --lk-danger: #E8715A; --lk-info: #7FAEB2;
    --lk-green-soft: #27351F; --lk-green-tint: #1C261A; --lk-teal-soft: #1C3133; --lk-success-bg: #1E3A14;
    --lk-warning-bg: #3A2E0E; --lk-danger-bg: #3E1912;
    --lk-info-bg: var(--lk-teal-soft);
    color-scheme: dark;
  }
}

/* --- Base ---------------------------------------------------------------- */
html { font-family: var(--font-body); font-size: 16px; -webkit-font-smoothing: antialiased; }
body { margin: 0; background: var(--bg); color: var(--fg); line-height: var(--leading-base); }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: var(--tracking-display); line-height: var(--leading-tight); margin: 0; }
h1 { font-size: var(--text-3xl); font-weight: 700; }
h2 { font-size: var(--text-2xl); font-weight: 700; }
h3 { font-size: var(--text-xl); font-weight: 700; }
h4 { font-family: var(--font-body); font-size: var(--text-lg); font-weight: 600; margin: 0; }
.eyebrow { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-muted); }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }