/* Shared tokens + night-sky background for landing and app */
@property --h { syntax: '<number>'; inherits: true; initial-value: 220; }
/* sky colours are registered so a theme change fades instead of snapping (set per theme by src/themes.js) */
@property --sky-a { syntax: '<color>'; inherits: true; initial-value: rgba(86, 70, 170, .35); }
@property --sky-b { syntax: '<color>'; inherits: true; initial-value: rgba(40, 90, 150, .30); }
@property --sky-c { syntax: '<color>'; inherits: true; initial-value: rgba(110, 80, 190, .18); }
@property --sky-top { syntax: '<color>'; inherits: true; initial-value: #0f1530; }
@property --sky-bottom { syntax: '<color>'; inherits: true; initial-value: #090d1c; }

:root {
  --ink: #e9ecf8;
  --ink-dim: rgba(233, 236, 248, .6);
  --glass: rgba(255, 255, 255, .07);
  --glass-line: rgba(255, 255, 255, .11);
  --violet: #b9a6ff;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--sky-bottom); }
:root { transition: --sky-a 1s, --sky-b 1s, --sky-c 1s, --sky-top 1s, --sky-bottom 1s; }   /* the values are set on <html>, so the fade lives here */
body {
  margin: 0; color: var(--ink);
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid rgba(255, 255, 255, .55); outline-offset: 3px; }

#sky {
  position: fixed; inset: -20%; z-index: -1;
  background:
    radial-gradient(40% 40% at 25% 25%, var(--sky-a), transparent 70%),
    radial-gradient(45% 45% at 78% 70%, var(--sky-b), transparent 70%),
    radial-gradient(35% 35% at 60% 15%, var(--sky-c), transparent 70%),
    linear-gradient(180deg, var(--sky-top), var(--sky-bottom));
  animation: skydrift 70s ease-in-out infinite alternate;
}
@keyframes skydrift { to { transform: translate(4%, 3%) scale(1.08) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { #sky { animation: none; } }