/* LunarLens — shared tokens, type and primitives for the landing page and the workspaces. */

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-500.woff2") format("woff2");
  font-weight: 500 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --stage: #050505;
  --ink: #fafafa;
  --muted: #a7a6a6;
  --nav: #b6b5b5;
  --strip: #8b8a8a;
  --faint: #7a7979;             /* 4.7:1 on the stage: the dimmest text that stays readable */
  --pill: #ffffff;
  --pill-ink: #050505;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.18);
  --wash: rgba(255, 255, 255, 0.035);

  /* Colour is reserved for data. */
  --verified: #e8f1ff;
  --rejected: #d0645a;
  --amber: #d9a44a;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Template unit system: 1 design px locked to the height of a 1487 x 1058 comp. */
  --u: calc(100vh / 1058);
  --uw: calc(100vw / 1487);
  --h: clamp(var(--u), calc(var(--u) * .65 + var(--uw) * .35), calc(var(--u) * 1.16));
}
@supports (height: 100dvh) { :root { --u: calc(100dvh / 1058); } }

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

/* The hidden attribute always wins: component styles that set display (flex,
   grid) must not resurrect an element that script has hidden. */
[hidden] { display: none !important; }

html { background: var(--stage); color-scheme: dark; }
body {
  margin: 0;
  background: var(--stage);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select { font: inherit; color: inherit; }
::selection { background: rgba(232, 241, 255, .22); }

:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

/* ── brand ─────────────────────────────────────────────────────────────── */

.mark { display: block; width: 100%; height: 100%; }

/* ── pills ─────────────────────────────────────────────────────────────── */

.pill {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px;
  background: var(--pill); color: var(--pill-ink);
  font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: transform .5s var(--ease), background-color .3s var(--ease), opacity .3s;
}
.pill:hover { transform: translateY(-1px); background: #e9e9e9; }
.pill:active { transform: translateY(0); }
.pill[disabled] { opacity: .35; cursor: not-allowed; transform: none; }

.ghost {
  display: inline-flex; align-items: center; gap: .45em;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: #fff; font-weight: 500; white-space: nowrap;
}
.ghost::after {
  content: ""; width: .42em; height: .42em;
  border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: .7;
  transition: transform .5s var(--ease);
}
.ghost:hover::after { transform: translateX(3px) rotate(45deg); }
.ghost[disabled] { opacity: .35; cursor: not-allowed; }

/* ── motion ────────────────────────────────────────────────────────────── */

@keyframes rise { from { opacity: 0; transform: translateY(calc(14 * var(--u))); } }
@keyframes fade { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-delay: 0s !important;
    transition-duration: .001s !important;
  }
}

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

/* ── crosshair cursor (landing, fine pointers only; added by cursor.js) ── */

.has-cursor, .has-cursor * { cursor: none !important; }
.cursor-dot, .cursor-ring {
  position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none;
  will-change: transform; opacity: 0; transition: opacity .3s;
}
.has-cursor.cursor-visible .cursor-dot, .has-cursor.cursor-visible .cursor-ring { opacity: 1; }
.cursor-dot { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: #fff; mix-blend-mode: difference; }
.cursor-ring {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.55);
  transition: opacity .3s, border-radius .35s var(--ease), border-color .3s;   /* size and position are eased in JS */
}
.cursor-ring::before, .cursor-ring::after {
  content: ""; position: absolute; background: rgba(255,255,255,.55); transition: opacity .25s;
}
.cursor-ring::before { left: 50%; top: -6px; bottom: -6px; width: 1px; transform: translateX(-.5px); }
.cursor-ring::after { top: 50%; left: -6px; right: -6px; height: 1px; transform: translateY(-.5px); }
.cursor-ring.is-snapped { border-color: rgba(232,241,255,.8); }
.cursor-ring.is-snapped::before, .cursor-ring.is-snapped::after { opacity: 0; }
.cursor-ring.is-down { border-color: #fff; }