/* Design tokens, reset, and small shared utilities. Dark is the default theme. */

:root,
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0f1115;
  --surface: #151920;
  --surface-2: #1b212a;
  --field: #11151b;
  --canvas: #0a0c10;
  --border: #272e38;
  --border-strong: #38414e;
  --text: #e9ecf1;
  --muted: #9aa4b2;
  --accent: #7aa7ff;
  --accent-ink: #0b1220;
  --accent-soft: rgba(122, 167, 255, 0.16);
  --danger: #ff8b8b;
  --danger-soft: rgba(255, 139, 139, 0.14);
  --success: #6fd6a0;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 40px rgba(0, 0, 0, 0.55);
  --page-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 24px 64px rgba(0, 0, 0, 0.6);
}

:root[data-theme='light'] {
  color-scheme: light;
  --bg: #f3f4f7;
  --surface: #ffffff;
  --surface-2: #f6f7f9;
  --field: #ffffff;
  --canvas: #e6e8ed;
  --border: #dde1e7;
  --border-strong: #c3c9d2;
  --text: #14181f;
  --muted: #5b6573;
  --accent: #2455d4;
  --accent-ink: #ffffff;
  --accent-soft: rgba(36, 85, 212, 0.1);
  --danger: #c0392b;
  --danger-soft: rgba(192, 57, 43, 0.09);
  --success: #1c7c4d;
  --shadow: 0 1px 2px rgba(20, 24, 31, 0.08), 0 12px 32px rgba(20, 24, 31, 0.14);
  --page-shadow: 0 1px 3px rgba(20, 24, 31, 0.18), 0 18px 48px rgba(20, 24, 31, 0.2);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.45 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p { margin: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

::selection { background: var(--accent-soft); }

.icon { flex: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}