/* Design tokens, reset and page atmosphere.
   Language: milady-adjacent Y2K internet. Pixel type, pastel neon on off-black
   violet, Win98 bevels, zero corner radius, scanlines over a star field. */

:root {
  /* ground */
  --void: #0b0614;
  --void-2: #140a24;
  --panel: #1a0f2e;
  --panel-2: #241542;

  /* bevel edges: light up-left, dark down-right */
  --edge: rgba(201, 167, 255, 0.22);
  --edge-lit: rgba(242, 233, 255, 0.34);
  --edge-dark: rgba(6, 3, 12, 0.85);

  /* text */
  --ghost: #f4ecff;
  --ghost-dim: rgba(244, 236, 255, 0.68);
  --ghost-faint: rgba(244, 236, 255, 0.42);

  /* the one brand accent */
  --hot: #ff5ec8;
  --hot-lit: #ffa8e2;
  --hot-deep: #a01f6d;

  /* state colours, used semantically and never as decoration */
  --up: #b8ff3c;
  --down: #ff7a7a;
  --cyan: #6ef2ff;
  --gold: #ffd34d;
  --lav: #c9a7ff;

  /* set per layer from JS */
  --tint: rgba(255, 94, 200, 0.2);
  --glow: rgba(255, 94, 200, 0.4);

  --font-pixel: 'Silkscreen', 'Courier New', monospace;
  --font-term: 'VT323', 'Courier New', monospace;
  --font-flavour: 'Times New Roman', Times, serif;

  --step-0: clamp(0.62rem, 0.6rem + 0.14vw, 0.7rem);
  --step-1: clamp(0.95rem, 0.88rem + 0.3vw, 1.12rem);
  --step-2: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  --step-3: clamp(1.8rem, 1.4rem + 1.6vw, 3rem);
  --step-4: clamp(2.6rem, 1.8rem + 3.6vw, 5.5rem);

  --rule: 1px solid var(--edge);
  --bevel: inset 1px 1px 0 var(--edge-lit), inset -1px -1px 0 var(--edge-dark);
  --bevel-in: inset -1px -1px 0 var(--edge-lit), inset 1px 1px 0 var(--edge-dark);
  --hard-shadow: 3px 3px 0 rgba(6, 3, 12, 0.8);

  --ease-out: cubic-bezier(0.16, 0.84, 0.32, 1);
  --ease-spring: cubic-bezier(0.22, 1.4, 0.36, 1);
}

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

html,
body {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--void);
  color: var(--ghost);
  font-family: var(--font-term);
  font-size: var(--step-1);
  line-height: 1.35;
  overflow: clip;
  -webkit-font-smoothing: antialiased;
}

/* Star field plus the layer's tint. The stars are gradients, not an image. */
body::before {
  content: '';
  position: fixed;
  inset: -20%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(58% 46% at 50% 40%, var(--tint), transparent 72%),
    radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 74% 12%, rgba(201, 167, 255, 0.9), transparent),
    radial-gradient(1.5px 1.5px at 33% 61%, rgba(110, 242, 255, 0.7), transparent),
    radial-gradient(1px 1px at 88% 72%, rgba(255, 168, 226, 0.8), transparent),
    radial-gradient(1px 1px at 51% 88%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 8% 79%, rgba(255, 211, 77, 0.7), transparent),
    linear-gradient(180deg, var(--void-2), var(--void) 60%);
  transition: background 900ms var(--ease-out);
}

/* Scanlines. Fixed and pointer-events-none so it never repaints on scroll. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 40;
  opacity: 0.5;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.22) 3px,
    rgba(0, 0, 0, 0.22) 4px
  );
}

::selection {
  background: var(--hot);
  color: var(--void);
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.label {
  font-family: var(--font-pixel);
  font-size: var(--step-0);
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--ghost-faint);
}

.num {
  font-family: var(--font-term);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
  body::after { opacity: 0.25; }
}