/* Design tokens shared between game and admin. */

:root {
  --bg: #fafaf6;
  --bg-elev: #fff;
  --fg: #1a1a1a;
  --fg-muted: #666;
  --accent: #2563eb;
  --accent-soft: #dbeafe;
  --tile-bg: #fff;
  --tile-fg: #1a1a1a;
  --tile-border: #d4d4d4;
  --tile-fixed-bg: #f3f4f6;
  --tile-fixed-fg: #6b7280;
  --tile-locked-bg: #ecfdf5;
  --tile-locked-fg: #065f46;
  --tile-grab-bg: #fde68a;
  --tile-target-bg: #bfdbfe;
  --shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .06);

  --radius: 6px;
  --gap: 6px;
  --tile-size: clamp(48px, 14vw, 84px);

  --font-display: ui-rounded, -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-tile: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* Explicit light theme — wins over system preference. */
:root[data-theme="light"] {
  --bg: #fafaf6;
  --bg-elev: #fff;
  --fg: #1a1a1a;
  --fg-muted: #666;
  --accent: #2563eb;
  --accent-soft: #dbeafe;
  --tile-bg: #fff;
  --tile-fg: #1a1a1a;
  --tile-border: #d4d4d4;
  --tile-fixed-bg: #f3f4f6;
  --tile-fixed-fg: #6b7280;
  --tile-locked-bg: #ecfdf5;
  --tile-locked-fg: #065f46;
  --tile-grab-bg: #fde68a;
  --tile-target-bg: #bfdbfe;
}

/* Explicit dark theme — wins over system preference. */
:root[data-theme="dark"] {
  --bg: #0e0e10;
  --bg-elev: #181820;
  --fg: #f3f4f6;
  --fg-muted: #9ca3af;
  --accent: #60a5fa;
  --accent-soft: #1e3a8a;
  --tile-bg: #1f1f28;
  --tile-fg: #f3f4f6;
  --tile-border: #383843;
  --tile-fixed-bg: #2a2a35;
  --tile-fixed-fg: #9ca3af;
  --tile-locked-bg: #052e1f;
  --tile-locked-fg: #6ee7b7;
  --tile-grab-bg: #78350f;
  --tile-target-bg: #1e40af;
}

/* System default when no explicit data-theme is set. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e0e10;
    --bg-elev: #181820;
    --fg: #f3f4f6;
    --fg-muted: #9ca3af;
    --accent: #60a5fa;
    --accent-soft: #1e3a8a;
    --tile-bg: #1f1f28;
    --tile-fg: #f3f4f6;
    --tile-border: #383843;
    --tile-fixed-bg: #2a2a35;
    --tile-fixed-fg: #9ca3af;
    --tile-locked-bg: #052e1f;
    --tile-locked-fg: #6ee7b7;
    --tile-grab-bg: #78350f;
    --tile-target-bg: #1e40af;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-display);
  -webkit-text-size-adjust: 100%;
}

button {
  font: inherit;
  padding: .5em 1em;
  border-radius: var(--radius);
  border: 1px solid var(--tile-border);
  background: var(--bg-elev);
  color: var(--fg);
  cursor: pointer;
  transition: background-color .15s, transform .1s;
}
button:hover:not(:disabled) { background: var(--accent-soft); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: not-allowed; }