/* ─────────────────────────────────────────────────────────────
   Prosoz Design System foundations + Worldcafé app base.
   Brand colors 1–6 are used only in sanctioned 60° gradient pairs.
   Mark Pro is the corporate font; Mulish (Google Fonts) stands in.
   ───────────────────────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;500;700&display=swap");

:root {
  --prosoz-1: #00F078; --prosoz-2: #00EBFF; --prosoz-3: #003C8C;
  --prosoz-4: #8200FF; --prosoz-5: #FF1E78; --prosoz-6: #FFF000;

  --fg-primary: #000; --fg-secondary: #404040; --fg-muted: #9D9D9D;
  --bg-page: #fff; --bg-soft: #F2F2F2; --line: #000; --line-soft: #EDEDED;

  --grad-6-5: linear-gradient(60deg, var(--prosoz-6) 0%, var(--prosoz-5) 100%);
  --grad-6-2: linear-gradient(60deg, var(--prosoz-6) 0%, var(--prosoz-2) 100%);
  --grad-6-1: linear-gradient(60deg, var(--prosoz-6) 0%, var(--prosoz-1) 100%);
  --grad-1-3: linear-gradient(60deg, var(--prosoz-1) 0%, var(--prosoz-3) 100%);
  --grad-5-3: linear-gradient(60deg, var(--prosoz-5) 0%, var(--prosoz-3) 100%);
  --grad-2-4: linear-gradient(60deg, var(--prosoz-2) 0%, var(--prosoz-4) 100%);

  --font-display: "Mark Pro", "Mulish", "Inter", "Arial", "Helvetica", system-ui, sans-serif;
  --font-system: "Verdana", "DejaVu Sans", "Geneva", "Tahoma", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  font-family: var(--font-display);
  color: var(--fg-primary); background: var(--bg-page);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
}
body { overflow: hidden; }
body.scroll { overflow: auto; }

input:focus, textarea:focus { outline: 2px solid var(--fg-primary); outline-offset: 1px; }
textarea { resize: none; }
::placeholder { color: var(--fg-muted); }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #DADADA; }

/* Buttons erben die (schwarze) Textfarbe — sonst färbt iOS/Safari icon-only
   Buttons (currentColor-Icons) im blauen System-Ton ein. */
button { font-family: var(--font-display); color: inherit; }
input, textarea { font-family: var(--font-display); }
/* Inline-SVG-Icons folgen immer der Textfarbe (Standard: Schwarz). */
svg { color: inherit; }

@keyframes pop { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes livepulse { 0% { opacity: 1; } 50% { opacity: .3; } 100% { opacity: 1; } }
@keyframes driftUp { from { transform: translateY(108vh); } to { transform: translateY(-108vh); } }
@keyframes spinPing { 0% { transform: scale(1); } 50% { transform: scale(1.04); } 100% { transform: scale(1); } }

.pop { animation: pop .3s ease both; }

/* gradient-clipped text helper */
.grad-text { -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }