/* design.css — Globale Design-Tokens (Task 10)
 * Spec: multi-user-architecture.md §15
 *
 * Verwendet von Landing-/Login-Page, Chat-Page, allen kuenftigen UIs.
 * Per §15 verbindlich: nur Tokens nutzen, kein hartkodiertes #fff etc.
 *
 * Ausgeliefert ueber Express /static/ (siehe server.js). Caddy
 * fallback-routet *.sapiens-ai.app/static/* -> Express (file_server
 * matcht nicht, da user-pages/ keine static/-Eintraege haben).
 */

:root {
  --color-bg: #fafafa;
  --color-surface: #fff;
  --color-text: #222;
  --color-text-faint: #888;
  --color-border: #ddd;
  --color-primary: #222;
  --color-primary-fg: #fff;
  --color-link: #0066cc;

  --space-xs: .25rem;
  --space-sm: .5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 3rem;

  --radius-sm: 6px;
  --radius-md: 8px;

  --font-stack: system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, monospace;

  --max-content-width: 480px;
  --touch-min: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1a1a1a;
    --color-surface: #2a2a2a;
    --color-text: #f0f0f0;
    --color-text-faint: #aaa;
    --color-border: #3a3a3a;
    --color-primary: #f0f0f0;
    --color-primary-fg: #1a1a1a;
    --color-link: #66aaff;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-stack);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
}

/* Centered single-column layout (used by Landing/Login). Chat hat
 * eigenen full-height-Layout in chat.css. */
.wrap {
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
}
.box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

h1 {
  margin: 0 0 var(--space-sm);
  font-size: 1.4rem;
  color: var(--color-text);
}
p { margin: var(--space-sm) 0; }
small { color: var(--color-text-faint); }
code {
  font-family: var(--font-mono);
  font-size: .95em;
  background: var(--color-bg);
  padding: 0 var(--space-xs);
  border-radius: var(--radius-sm);
}
a { color: var(--color-link); }

.identity { word-break: break-word; }
.links { margin-top: var(--space-md); }
.links a { display: inline-block; margin-right: var(--space-sm); }

form { margin-top: var(--space-md); }
input[type="email"],
input[type="text"] {
  font-family: var(--font-stack);
  font-size: 16px; /* §15 Punkt 5: kein iOS-Auto-Zoom */
  width: 100%;
  min-height: var(--touch-min); /* §15 Punkt 4 */
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
}
button {
  font-family: var(--font-stack);
  font-size: 16px;
  min-height: var(--touch-min);
  width: 100%;
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-primary-fg);
  cursor: pointer;
}
button:hover { opacity: .9; }

.footer-note { margin-top: var(--space-lg); font-size: .9rem; }

/* weather-summary-v2 phase B: visible welcome-area for today's weather.
   Sapiens dark theme. Two-line markdown block (today + tomorrow). */
.welcome-weather {
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  font-size: 0.92rem;
  margin: 0.25rem 0.5rem 0.5rem;
  line-height: 1.45;
  color: var(--text-soft, inherit);
}
.welcome-weather p { margin: 0.1rem 0; }