/* NaLiHa — Design Tokens
   Salbei + Creme + Fraunces. Ruhig, ehrlich, nie aufgeregt. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Farben — direkt aus Briefing */
  --salbei-primaer: #8aa97c;
  --salbei-hover:   #a3c08e;
  --salbei-pressed: #6e8a62;
  --salbei-blass:   #dde7d4;
  --salbei-nebel:   #eef2e7;

  --creme-bg:       #f6f1e7;
  --creme-card:     #fcfaf4;
  --creme-tief:     #efe7d6;

  --holz:           #a08770;
  --erde:           #6b4f3a;

  --text-primaer:   #4a5340;
  --text-sekundaer: #7c8c6e;
  --text-leise:     #9a8e7a;

  --warnung:        #c87f6e;
  --hinweis:        #d4a857;
  --wasser:         #7398c2;
  --frost:          #9bb6cf;
  --ernte:          #b88a3e;

  /* Soft Status-Hintergründe (Pills + Karten-Tints) */
  --warn-soft:      #f1ddd6;
  --warn-tief:      #7a3f30;
  --wasser-soft:    #dde7f1;
  --wasser-tief:    #3d5d80;
  --frost-soft:     #e0e9f1;
  --frost-tief:     #4e6a82;
  --ernte-soft:     #efe1c8;
  --ernte-tief:     #7a5821;
  --hinweis-soft:   #f1e3c4;
  --hinweis-rand:   #e9d9b8;
  --hinweis-tief:   #5a4218;

  /* Erd- & Boden-Töne (Garten-Visualisierung) */
  --erde-hell:      #d4c3aa;
  --erde-mauer:     #c0b29a;
  --erde-rand:      #9a8770;
  --erde-dach:      #5a4a32;
  --erde-mittel:    #7a5d40;
  --rasen-hell:     #bdd29c;
  --rasen-blatt:    #a3c08e;
  --rasen-tief:     #9bb88a;
  --rasen-warm:     #fff6d8;
  --erde-pattern:   #c4a682;
  --erde-koerner:   #8b6f50;
  --erde-akzent:    #5a7048;
  --schatten:       #2a3a22;

  /* Type */
  --font-haupt: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* Radien */
  --r-card:   14px;
  --r-card-l: 18px;
  --r-pill:   24px;
  --r-tile:   8px;
  --r-input:  10px;

  /* Schatten (sehr leise) */
  --shadow-card:  0 1px 3px rgba(126,130,110,0.06);
  --shadow-float: 0 6px 24px rgba(74,83,64,0.10);

  /* Spacing */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;
  --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-7: 32px; --s-8: 48px;
}

/* ─── Reset light ─── */
* { box-sizing: border-box; }

.naliha {
  font-family: var(--font-haupt);
  font-weight: 400;
  font-feature-settings: "ss01", "ss02";
  color: var(--text-primaer);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}

.naliha .mono { font-family: var(--font-mono); letter-spacing: 0; }

/* ─── Gestreifter Platzhalter (default aesthetic) ─── */
.naliha .placeholder {
  background-color: var(--salbei-nebel);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 7px,
    rgba(110, 138, 98, 0.10) 7px,
    rgba(110, 138, 98, 0.10) 8px
  );
  border-radius: var(--r-card);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-leise);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  text-align: center;
  padding: 8px;
}
.naliha .placeholder.creme {
  background-color: var(--creme-tief);
  background-image: repeating-linear-gradient(
    135deg, transparent 0, transparent 7px,
    rgba(160, 135, 112, 0.12) 7px, rgba(160, 135, 112, 0.12) 8px
  );
}

/* ─── Cards, Pills ─── */
.naliha .card {
  background: var(--creme-card);
  border-radius: var(--r-card);
  padding: var(--s-4);
  box-shadow: var(--shadow-card);
}
.naliha .card-l {
  background: var(--creme-card);
  border-radius: var(--r-card-l);
  padding: var(--s-5);
  box-shadow: var(--shadow-card);
}

.naliha .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--salbei-blass);
  color: var(--text-primaer);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.naliha .pill.creme { background: var(--creme-tief); color: var(--erde); }
.naliha .pill.warn  { background: var(--warn-soft);   color: var(--warn-tief); }
.naliha .pill.wasser{ background: var(--wasser-soft); color: var(--wasser-tief); }
.naliha .pill.ernte { background: var(--ernte-soft);  color: var(--ernte-tief); }
.naliha .pill.frost { background: var(--frost-soft);  color: var(--frost-tief); }

.naliha .btn-primary {
  background: var(--salbei-primaer);
  color: #fff;
  border: 0;
  border-radius: var(--r-pill);
  padding: 14px 22px;
  font-family: var(--font-haupt);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  min-height: 48px;
}
.naliha .btn-ghost {
  background: transparent;
  color: var(--text-primaer);
  border: 1px solid var(--salbei-blass);
  border-radius: var(--r-pill);
  padding: 12px 18px;
  font-family: var(--font-haupt);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  min-height: 44px;
}

.naliha h1 { font-weight: 400; letter-spacing: -0.015em; margin: 0; }
.naliha h2 { font-weight: 400; letter-spacing: -0.012em; margin: 0; }
.naliha h3 { font-weight: 500; letter-spacing: -0.008em; margin: 0; }
.naliha p  { margin: 0; }

.naliha .label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-leise);
  font-weight: 500;
}

/* Status (Bibliothek-Karten) */
.naliha .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--salbei-primaer);
  display: inline-block;
  vertical-align: middle;
}
.naliha .dot.warn  { background: var(--warnung); }
.naliha .dot.water { background: var(--wasser);  }
.naliha .dot.idle  { background: var(--text-leise); }

/* ─── Desktop ─── */
/* Auf großen Bildschirmen hat der Body um die App herum sehr subtile
   Salbei-Akzente — die App wirkt eingebettet statt verloren. */
@media (min-width: 900px) {
  body {
    background:
      radial-gradient(circle at 14% 28%, var(--salbei-nebel) 0, transparent 24%),
      radial-gradient(circle at 86% 72%, var(--salbei-nebel) 0, transparent 22%),
      var(--creme-bg);
  }
  .naliha.nlh-shell {
    height: min(100vh, 920px);
    margin-top: max(0px, calc((100vh - 920px) / 2));
    border-radius: 18px;
    box-shadow:
      0 0 0 1px rgba(126,130,110,0.10),
      0 30px 80px rgba(74,83,64,0.14),
      0 2px 8px rgba(74,83,64,0.06);
  }
}

/* Auf sehr großen Bildschirmen (>= 1280px) zusätzlich einen leisen
   Brand-Hinweis links — verhindert das "verlorene App"-Gefühl,
   ohne den Fokus von der App zu ziehen. */
@media (min-width: 1280px) {
  body::before {
    content: "NaLiHa";
    position: fixed;
    left: 48px; top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: left center;
    font-family: var(--font-haupt);
    font-style: italic;
    font-size: 22px;
    letter-spacing: 0.18em;
    color: var(--salbei-pressed);
    opacity: 0.22;
    pointer-events: none;
    z-index: 0;
  }
  body::after {
    content: "ruhig anwesend";
    position: fixed;
    right: 48px; top: 50%;
    transform: translateY(-50%) rotate(90deg);
    transform-origin: right center;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--text-leise);
    opacity: 0.45;
    pointer-events: none;
    z-index: 0;
  }
}