/* PlannExSteam — design tokens.
   Idea: PlannEx is a sunlit icy-lavender day. PlannExSteam is the same orbit at night:
   ink-blue space, pearl surfaces (the suit), periwinkle (the "EX"), ion cyan (the suit lights),
   and a violet glint (the visor). */
:root {
  --ink: #06061a;
  --night: #0b0c2a;
  --deep: #141747;
  --orbit: #1e2263;
  --royal: #3651bf;      /* logo deep blue */
  --peri: #8c99ff;       /* logo EX */
  --lav: #b8bfff;
  --frost: #dde1ff;
  --pearl: #f1f2ff;      /* suit */
  --pearl-2: #e3e5fb;
  --ion: #5fe0ff;        /* suit lights */
  --visor: #8f5bff;      /* visor glint */
  --ok: #6ff0b8;
  --warn: #ffb86b;
  --err: #ff7a93;

  --text: #ebedff;
  --text-2: #a7acdc;
  --text-3: #6d72a8;
  --on-pearl: #12143a;
  --on-pearl-2: #565b8c;

  --line: rgba(184, 191, 255, .14);
  --line-2: rgba(184, 191, 255, .26);

  --f-display: 'Unbounded', system-ui, sans-serif;
  --f-body: 'Onest', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;

  --r-s: 10px;
  --r-m: 18px;
  --r-l: 28px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--ink); color: var(--text); font-family: var(--f-body); line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--ion); outline-offset: 3px; border-radius: 6px; }

[hidden] { display: none !important; }
.mono { font-family: var(--f-mono); letter-spacing: .04em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Wordmark: PlannEx bold + Steam hairline, one word */
.wm { font-family: var(--f-display); font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.wm .ex { color: var(--peri); }
.wm .st { font-weight: 300; color: var(--frost); margin-left: .04em; }

/* Pearl surface = the suit fabric */
.pearl {
  background:
    radial-gradient(120% 80% at 0% 0%, #fff 0%, rgba(255,255,255,0) 55%),
    linear-gradient(160deg, var(--pearl) 0%, var(--pearl-2) 60%, #d6d9f6 100%);
  color: var(--on-pearl);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(54, 81, 191, .12), 0 30px 80px -30px rgba(6, 6, 26, .9), 0 0 0 1px rgba(255,255,255,.6);
}

/* Ion light strip, like on the suit chest */
.ion-strip { display: inline-block; width: 28px; height: 6px; border-radius: 6px; background: var(--ion); box-shadow: 0 0 12px var(--ion), 0 0 2px #fff inset; }

@keyframes float { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-1.5deg); } 50% { transform: translate3d(0, -14px, 0) rotate(1.2deg); } }
@keyframes pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes blink { 50% { opacity: .35; } }
@keyframes spin { to { transform: rotate(360deg); } }

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