/* Tokens, reset, typography and the layers behind the UI. Theme colours are overwritten by js/themes.js. */
@property --spot { syntax: '<number>'; inherits: false; initial-value: 0; }

:root {
  --bg: #06030f; --bg-rgb: 6 3 15;
  --a1: #b44dff; --a1-rgb: 180 77 255;
  --a2: #3b6dff; --a2-rgb: 59 109 255;
  --a3: #27e6ff; --a3-rgb: 39 230 255;
  --hot: #ff3fd2; --hot-rgb: 255 63 210;
  --ink: #eaf4ff; --ink-dim: #aebcdc; --ink-faint: #8392bb;

  /* System fonts only: nothing to download, nothing to license. */
  --f-display: "DIN Condensed", "Bahnschrift", "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --f-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  --f-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --spot: 0; /* pointer spotlight strength; also a fallback for browsers without @property */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --r-lg: 22px; --r-md: 16px; --r-sm: 12px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dock-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html, body {
  margin: 0; height: 100%;
  background: var(--bg); color: var(--ink);
  overflow: hidden; overscroll-behavior: none;
}
body {
  font: 400 16px/1.5 var(--f-body);
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol { margin: 0; }
:focus-visible { outline: 2px solid var(--a3); outline-offset: 3px; border-radius: 8px; }

.mono { font: 500 12px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.selectable, .selectable * { -webkit-user-select: text; user-select: text; }
.savable img { -webkit-touch-callout: default; -webkit-user-select: auto; user-select: auto; }

/* Layers: canvas city < scanlines + vignette < screens < dock/sheet */
#bg { position: fixed; left: 0; top: 0; z-index: 0; background: var(--bg); }
#veil {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgb(0 0 0 / .1) 0 1px, transparent 1px 3px),
    radial-gradient(120% 85% at 50% 42%, transparent 55%, rgb(0 0 0 / .55) 100%),
    linear-gradient(180deg, rgb(var(--bg-rgb) / .55), transparent 16%, transparent 64%, rgb(var(--bg-rgb) / .8));
}
#app { position: fixed; inset: 0; z-index: 2; }

/* Animation intensity is set on <html data-fx="0..3"> by main.js (0 = still). */
html[data-fx="0"] *, html[data-fx="0"] *::before, html[data-fx="0"] *::after {
  animation: none !important;
  transition-duration: .01ms !important;
  scroll-behavior: auto !important;
}