/* =====================================================================
   TOMORROWLAND — base.css
   Reset, typography, focus, motion preferences. Consumes tokens.css.
   ===================================================================== */

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

* { margin: 0; padding: 0; }

/* The [hidden] attribute must win over component display rules (flex/grid). */
[hidden] { display: none !important; }

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

body {
  height: 100%;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden; /* the app is a single viewport; acts scroll internally */
  /* Ambient light — two faint auroras over the near-black blue. Gives the
     observatory depth without competing with content. World theming tints
     the top-left pool via --w-glow when inside a world. */
  background:
    radial-gradient(1100px 700px at 12% -8%, var(--w-glow, rgba(94,230,160,0.06)), transparent 60%),
    radial-gradient(900px 620px at 108% 12%, rgba(127,180,230,0.05), transparent 55%),
    var(--canvas);
  background-attachment: fixed;
}

/* Fine film grain, laid over everything, so flat panels read as "designed"
   surface rather than plain fills. Non-interactive, respects reduced motion. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, canvas, svg, video { display: block; max-width: 100%; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}

button { cursor: pointer; }
button:disabled { cursor: not-allowed; }

a { color: var(--data); text-decoration: none; }
a:hover { text-decoration: underline; }

ul, ol { list-style: none; }

/* ---- Typography ---------------------------------------------------- */

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: 0;
}

h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-display); }
h3 { font-size: var(--fs-title); line-height: var(--lh-snug); }

p + p { margin-top: var(--s-3); }

strong { font-weight: 600; }

::selection { background: var(--data-dim); color: var(--text); }

/* Telemetry: any live number, score, timer, coordinate.
   Mono + tabular so digits never jitter as they change. */
.telemetry {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.02em;
}

/* Micro caps label — used above data, on chips, in the rail */
.microcaps {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--text-2);
}

.text-2 { color: var(--text-2); }
.text-3 { color: var(--text-3); }
.small  { font-size: var(--fs-small); }

.accent-phosphor { color: var(--phosphor); }
.accent-break    { color: var(--break); }
.accent-data     { color: var(--data); }

/* ---- Focus ---------------------------------------------------------- */

:focus { outline: none; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-1);
}

/* ---- Scrollbars (subtle instrument rails) --------------------------- */

* { scrollbar-width: thin; scrollbar-color: var(--hairline-strong) transparent; }

*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--hairline-strong);
  border-radius: var(--r-round);
}

/* ---- Utility -------------------------------------------------------- */

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

.hairline-top    { border-top: 1px solid var(--hairline); }
.hairline-bottom { border-bottom: 1px solid var(--hairline); }

/* ---- Motion preferences --------------------------------------------- */

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