/* base.css — CSS primitives, theme tokens, iOS resets, safe areas. */

:root {
  --primary: #611dd8;
  --blue: var(--primary); /* legacy alias: existing rules use var(--blue) */
  --green: #34c759;
  --red: #ff3b30;
  --orange: #ff9500;
  --bg: #f2f2f7;
  --bg-elev: #ffffff;
  --bg-grouped: #ffffff;
  --text: #1c1c1e;
  --text-2: #3c3c43;
  --muted: #8e8e93;
  --separator: rgba(60, 60, 67, 0.18);
  --fill: rgba(120, 120, 128, 0.12);
  --topbar-h: 52px;
  --tabbar-h: 56px;
  --radius: 14px;
  --pad: 16px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Dark tokens. Applied for system-dark *only when the user hasn't forced a
   theme* (data-theme unset), and always for an explicit Dark choice. The two
   blocks are kept identical by hand — CSS has no mixins. Light is the :root
   default above, so an explicit Light choice just needs to opt out of the
   media query (which the [data-theme] attribute does). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --primary: #8b5cf6; /* lighter purple for contrast on black */
    --bg: #000000;
    --bg-elev: #1c1c1e;
    --bg-grouped: #1c1c1e;
    --text: #ffffff;
    --text-2: #ebebf5;
    --muted: #8e8e93;
    --separator: rgba(84, 84, 88, 0.6);
    --fill: rgba(120, 120, 128, 0.24);
  }
}
:root[data-theme="dark"] {
  --primary: #8b5cf6;
  --bg: #000000;
  --bg-elev: #1c1c1e;
  --bg-grouped: #1c1c1e;
  --text: #ffffff;
  --text-2: #ebebf5;
  --muted: #8e8e93;
  --separator: rgba(84, 84, 88, 0.6);
  --fill: rgba(120, 120, 128, 0.24);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.3;
  color: var(--text);
  background: var(--bg);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

button, input, select { font-family: inherit; font-size: inherit; color: inherit; }

h1, h2, p, ul { margin: 0; }
ul { list-style: none; padding: 0; }

.muted { color: var(--muted); font-size: 14px; }

a { color: var(--blue); text-decoration: none; }

/* App layout: fixed top bar + scrolling screen + fixed bottom tab bar. */
.app { min-height: 100dvh; }

.screen {
  padding: calc(var(--topbar-h) + env(safe-area-inset-top) + 8px) var(--pad)
           calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 24px);
  min-height: 100dvh;
  -webkit-overflow-scrolling: touch;
}

.fatal { padding: 40px var(--pad); color: var(--red); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}