/* ============================================================
   KaufNavi Design-Tokens
   Farbsystem: neutrale Papier-Basis + ein Hue je Bereich.
   Jede Farbe ist im Hellmodus auf bare :root definiert und im
   Dunkelmodus nur ueberschrieben - nie nur in einem Media-Block.
   ============================================================ */

:root {
  /* --- Grundflaechen --- */
  --kn-paper:        #fffdf8;
  --kn-paper-2:      #f7f2e9;
  --kn-paper-3:      #efe8db;
  --kn-surface:      #ffffff;
  --kn-line:         #e3dccd;
  --kn-line-strong:  #c9c0ad;

  /* --- Schrift --- */
  --kn-ink:          #16161d;
  --kn-ink-2:        #4a4a57;
  --kn-ink-3:        #6f6f7d;
  --kn-ink-invert:   #fffdf8;

  /* Immer dunkle Flaeche fuer Kopfleiste und Fuss. Diese beiden Baender
     tragen fest helle Schrift, deshalb darf ihr Grund NICHT mit dem
     Dunkelmodus mitflippen - sonst steht Weiss auf Weiss. */
  --kn-deep:         #16161d;
  --kn-deep-fg:      #cfcdd8;
  --kn-deep-fg-hell: #fffdf8;
  --kn-deep-fg-matt: #9d9bab;
  --kn-deep-line:    rgb(255 255 255 / 12%);

  /* --- Marke --- */
  --kn-brand:        #1f2bd6;   /* KaufNavi Blau */
  --kn-brand-ink:    #141a8a;
  --kn-brand-soft:   #e8e9ff;
  --kn-signal:       #ffc714;   /* Signalgelb - Akzent, Rang 1 */
  --kn-signal-ink:   #6b4c00;
  --kn-signal-soft:  #fff4d1;

  /* --- Status --- */
  --kn-plus:         #0f7a52;
  --kn-plus-soft:    #e2f4ec;
  --kn-minus:        #a8321f;
  --kn-minus-soft:   #fbe9e5;

  /* --- Bereichsfarbe (wird pro Kategorie per inline --kn-h gesetzt) --- */
  --kn-h: 212;
  --kn-cat:        hsl(var(--kn-h) 62% 42%);
  --kn-cat-deep:   hsl(var(--kn-h) 66% 26%);
  --kn-cat-soft:   hsl(var(--kn-h) 70% 95%);
  --kn-cat-line:   hsl(var(--kn-h) 45% 82%);
  --kn-cat-ink:    hsl(var(--kn-h) 72% 24%);

  /* --- Masse --- */
  --kn-wrap:      1200px;
  --kn-wrap-text: 760px;
  --kn-r-sm:  6px;
  --kn-r:     12px;
  --kn-r-lg:  20px;
  --kn-gap:   clamp(1rem, 2.5vw, 2rem);

  /* --- Schatten: flach, papierhaft, kein Neon --- */
  --kn-shadow-1: 0 1px 2px rgb(22 22 29 / 7%), 0 2px 6px rgb(22 22 29 / 5%);
  --kn-shadow-2: 0 2px 6px rgb(22 22 29 / 8%), 0 12px 28px rgb(22 22 29 / 8%);

  /* --- Schrift-Stack: bewusst ohne Google Fonts (DSGVO) --- */
  --kn-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --kn-font-display: var(--kn-font);
  --kn-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --kn-paper:       #121319;
    --kn-paper-2:     #1a1b23;
    --kn-paper-3:     #22242e;
    --kn-surface:     #1a1b23;
    --kn-line:        #2f313d;
    --kn-line-strong: #454858;

    --kn-ink:         #f3f1ea;
    --kn-ink-2:       #b9b7c4;
    --kn-ink-3:       #8e8c9b;
    --kn-ink-invert:  #121319;
  --kn-deep:        #0c0d12;
    --kn-deep:        #0c0d12;

    --kn-brand:       #8b93ff;
    --kn-brand-ink:   #c3c8ff;
    --kn-brand-soft:  #23264a;
    --kn-signal:      #ffc714;
    --kn-signal-ink:  #ffdd7a;
    --kn-signal-soft: #3a3010;

    --kn-plus:        #4bc794;
    --kn-plus-soft:   #13312a;
    --kn-minus:       #ef8d7b;
    --kn-minus-soft:  #3a1e1a;

    --kn-cat:       hsl(var(--kn-h) 62% 68%);
    --kn-cat-deep:  hsl(var(--kn-h) 55% 78%);
    --kn-cat-soft:  hsl(var(--kn-h) 40% 17%);
    --kn-cat-line:  hsl(var(--kn-h) 30% 32%);
    --kn-cat-ink:   hsl(var(--kn-h) 60% 80%);

    --kn-shadow-1: 0 1px 2px rgb(0 0 0 / 40%);
    --kn-shadow-2: 0 2px 6px rgb(0 0 0 / 45%), 0 14px 32px rgb(0 0 0 / 40%);

  }
}

:root[data-theme="dark"] {
  --kn-paper:       #121319;
  --kn-paper-2:     #1a1b23;
  --kn-paper-3:     #22242e;
  --kn-surface:     #1a1b23;
  --kn-line:        #2f313d;
  --kn-line-strong: #454858;

  --kn-ink:         #f3f1ea;
  --kn-ink-2:       #b9b7c4;
  --kn-ink-3:       #8e8c9b;
  --kn-ink-invert:  #121319;

  --kn-brand:       #8b93ff;
  --kn-brand-ink:   #c3c8ff;
  --kn-brand-soft:  #23264a;
  --kn-signal:      #ffc714;
  --kn-signal-ink:  #ffdd7a;
  --kn-signal-soft: #3a3010;

  --kn-plus:        #4bc794;
  --kn-plus-soft:   #13312a;
  --kn-minus:       #ef8d7b;
  --kn-minus-soft:  #3a1e1a;

  --kn-cat:       hsl(var(--kn-h) 62% 68%);
  --kn-cat-deep:  hsl(var(--kn-h) 55% 78%);
  --kn-cat-soft:  hsl(var(--kn-h) 40% 17%);
  --kn-cat-line:  hsl(var(--kn-h) 30% 32%);
  --kn-cat-ink:   hsl(var(--kn-h) 60% 80%);

  --kn-shadow-1: 0 1px 2px rgb(0 0 0 / 40%);
  --kn-shadow-2: 0 2px 6px rgb(0 0 0 / 45%), 0 14px 32px rgb(0 0 0 / 40%);
}