/*
 * Design tokens. PLACEHOLDER values until docs/DESIGN.md is final.
 * Every color used anywhere in the app must come from a token here.
 * Themes: light, dark, white-blue, black-blue. Default follows the device.
 */
:root {
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 14px;
  --radius-sm: 10px;
  --space: 16px;
  --tap: 48px; /* minimum touch target height */

  --accent: #2563eb;
  --accent-contrast: #ffffff;
  --ok: #16a34a;
  --warn: #d97706;
  --bad: #dc2626;

  --bg: #f6f7f9;
  --surface: #ffffff;
  --text: #111418;
  --muted: #5b6470;
  --border: #dde1e6;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0f1115; --surface: #181b21; --text: #eef0f3; --muted: #9aa3ae; --border: #2a2f37;
    --accent: #3b82f6;
  }
}

:root[data-theme="light"] {
  --bg: #f6f7f9; --surface: #ffffff; --text: #111418; --muted: #5b6470; --border: #dde1e6;
  --accent: #2563eb;
}
:root[data-theme="dark"] {
  --bg: #0f1115; --surface: #181b21; --text: #eef0f3; --muted: #9aa3ae; --border: #2a2f37;
  --accent: #3b82f6;
}
:root[data-theme="white-blue"] {
  --bg: #eef4ff; --surface: #ffffff; --text: #0b1b3a; --muted: #4a5b7a; --border: #c9d8f5;
  --accent: #1d4ed8;
}
:root[data-theme="black-blue"] {
  --bg: #050a18; --surface: #0c1630; --text: #e6edff; --muted: #8fa2c9; --border: #1c2c52;
  --accent: #4f8cff;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  -webkit-text-size-adjust: 100%;
}

.page {
  max-width: 440px;
  margin: 0 auto;
  padding: calc(var(--space) * 2) var(--space);
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: calc(var(--space) * 1.25);
}

h1 { font-size: 1.5rem; margin: 0 0 4px; }
p.muted, .muted { color: var(--muted); }

label { display: block; font-size: .9rem; margin: 14px 0 6px; color: var(--muted); }
input, select {
  width: 100%;
  min-height: var(--tap);
  padding: 0 14px;
  font: inherit;
  font-size: 16px; /* prevents iOS zoom on focus */
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

button {
  width: 100%;
  min-height: var(--tap);
  margin-top: 20px;
  font: inherit;
  font-weight: 600;
  color: var(--accent-contrast);
  background: var(--accent);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
button:disabled { opacity: .6; cursor: default; }
button.secondary { background: transparent; color: var(--accent); border: 1px solid var(--border); }

.error { color: var(--bad); margin-top: 12px; min-height: 1.2em; }
.link { color: var(--accent); }
.center { text-align: center; }
[hidden] { display: none !important; }