/* ============================================================================
   TIKKI.VIP — Design-System  ·  „Obsidian Boardroom"
   Eine Quelle der Wahrheit für Farben, Typografie, Abstände, Primitive.
   Alle Komponenten (Login, Galerie, Raum, Panels) richten sich hieran aus.
   ============================================================================ */

:root {
  /* — Grundflächen: tiefes Obsidian mit warmem Kern — */
  --bg-0:#06080d;            /* tiefster Grund (Vignette-Rand) */
  --bg-1:#0a0e16;            /* App-Hintergrund */
  --bg-2:#111725;            /* Karten / Panels */
  --bg-3:#18202f;            /* erhöhte Fläche / Hover */
  --bg-glass:rgba(17,23,37,.62);
  --bg-glass-strong:rgba(10,14,22,.82);

  /* — Linien & Ränder — */
  --line:#232c3d;
  --line-soft:#1a2130;
  --line-lume:rgba(212,162,78,.28);

  /* — Text — */
  --ink:#eef2f8;            /* Primärtext, weiches Elfenbein */
  --ink-2:#aeb9cc;         /* Sekundär */
  --ink-3:#6f7c93;         /* gedämpft / Labels */

  /* — Akzente — */
  --gold:#d4a24e;          /* Messing/Gold — Premium-Signatur */
  --gold-bright:#f0c574;
  --gold-deep:#8a6a2f;
  --cyan:#5fd0d6;          /* „KI"-Leuchten */
  --cyan-deep:#2b8f96;
  --violet:#9b8cff;        /* zweiter KI-Ton */
  --rose:#ff8fae;          /* Mensch / Wärme */
  --ok:#4bd07f;
  --warn:#ffcf6b;
  --bad:#ff6b6b;

  /* — Bot-Markenfarben (Namensschild-Glow) — */
  --brand-opus:#d4a24e;
  --brand-grok:#7cc4ff;
  --brand-gpt:#4bd07f;
  --brand-gemini:#9b8cff;
  --brand-deepseek:#5fd0d6;
  --brand-mistral:#ff9d5c;

  /* — Radius — */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px;

  /* — Abstände (8-Raster) — */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;

  /* — Schatten & Leuchten — */
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 8px 30px rgba(0,0,0,.45);
  --shadow-3:0 24px 70px rgba(0,0,0,.6);
  --glow-gold:0 0 24px rgba(212,162,78,.35);
  --glow-cyan:0 0 24px rgba(95,208,214,.35);

  /* — Typografie — */
  --font-display:"Cormorant Garamond","Iowan Old Style",Garamond,"Times New Roman",serif;
  --font-ui:"Inter",-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --font-mono:"JetBrains Mono","SF Mono",ui-monospace,Menlo,Consolas,monospace;

  --z-scene:1; --z-panels:5; --z-header:10; --z-modal:50; --z-toast:80;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{
  background:
    radial-gradient(1200px 800px at 50% -10%, #14203a 0%, transparent 60%),
    radial-gradient(900px 700px at 90% 110%, #1a1330 0%, transparent 55%),
    var(--bg-1);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;      /* seitlich nie scrollen */
  overflow-y:auto;        /* Galerie darf vertikal scrollen (Raum-Ansicht ist fixed und deckt ab) */
}

/* — Typografische Primitive — */
.display{ font-family:var(--font-display); font-weight:600; letter-spacing:.01em; line-height:1.05; }
.eyebrow{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); }
.muted{ color:var(--ink-3); }
.mono{ font-family:var(--font-mono); }

/* — Karten / Glas — */
.card{
  background:linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-2);
}
.glass{
  background:var(--bg-glass);
  backdrop-filter:blur(16px) saturate(1.15);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  border:1px solid var(--line);
}

/* — Buttons — */
.btn{
  --_bg:var(--bg-3); --_fg:var(--ink); --_bd:var(--line);
  appearance:none; cursor:pointer; font-family:var(--font-ui); font-weight:600; font-size:14px;
  padding:11px 18px; border-radius:var(--r-pill);
  color:var(--_fg); background:var(--_bg); border:1px solid var(--_bd);
  display:inline-flex; align-items:center; gap:8px; transition:transform .12s, box-shadow .2s, background .2s, border-color .2s;
}
.btn:hover{ transform:translateY(-1px); border-color:var(--line-lume); }
.btn:active{ transform:translateY(0) scale(.98); }
.btn-gold{
  --_bg:linear-gradient(180deg,var(--gold-bright),var(--gold));
  --_fg:#1a1206; --_bd:transparent; box-shadow:var(--glow-gold);
}
.btn-ghost{ --_bg:transparent; --_bd:var(--line); }
.btn-cyan{ --_bg:linear-gradient(180deg,var(--cyan),var(--cyan-deep)); --_fg:#04171a; --_bd:transparent; box-shadow:var(--glow-cyan); }

/* — Chips / Tags — */
.chip{
  font-size:12px; padding:4px 11px; border-radius:var(--r-pill);
  border:1px solid var(--line); color:var(--ink-2); background:var(--bg-2);
  display:inline-flex; align-items:center; gap:6px;
}
.chip-dot::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; }

/* — Eingaben — */
.input, textarea.input{
  width:100%; background:var(--bg-1); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-sm);
  padding:12px 14px; font:15px var(--font-ui); transition:border-color .2s, box-shadow .2s;
}
.input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(212,162,78,.16); }
.input::placeholder{ color:var(--ink-3); }

/* — Scrollbar — */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--bg-3); border-radius:99px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background:var(--line); }

/* — Hilfsklassen — */
.row{ display:flex; align-items:center; }
.col{ display:flex; flex-direction:column; }
.gap-2{ gap:var(--s-2);} .gap-3{ gap:var(--s-3);} .gap-4{ gap:var(--s-4);}
.grow{ flex:1; } .center{ align-items:center; justify-content:center; }
.hidden{ display:none !important; }

/* — Feiner Korn/Noise-Overlay für Tiefe (rein CSS) — */
.grain::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:40; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* — Reduzierte Bewegung respektieren — */
@media (prefers-reduced-motion:reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }