/* src/client/brand.css — Lyradrift tokens, fonts, body background.
 *
 *   <link rel="stylesheet" href="/src/client/brand.css">
 *   <link rel="stylesheet" href="/src/client/panel.css">
 *
 * Tokens:  --void (ground)  --text (off-white)  --vega (mark, rings, grid, edges, focus)
 *          --grey (secondary text)  --amber (Dark Star, unused here)
 *          --display (Inter Tight 500)  --body (DM Sans 300/400)
 * Classes: .wordmark (lower-case Inter Tight, -0.03em; .wordmark .vega makes the first i's
 *          dot a star), .ui-btn (hairline button), .sr-only, .hairline (border colour).
 * Monochrome, dark only, no glow anywhere: hairlines and opacity carry the hierarchy.
 */
@font-face { font-family: 'Inter Tight'; font-weight: 500; font-style: normal; font-display: swap; src: url(/fonts/inter-tight-500.woff2) format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 300; font-style: normal; font-display: swap; src: url(/fonts/dm-sans-300.woff2) format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/dm-sans-400.woff2) format('woff2'); }

:root {
  --void: #050507;
  --text: #f2f2f0;
  --vega: #dfe9ff;
  --grey: #6a6a70;
  --amber: #ffc061;
  --vega-rgb: 223, 233, 255;
  --display: 'Inter Tight', system-ui, sans-serif;
  --body: 'DM Sans', system-ui, sans-serif;
  color-scheme: dark;
}

html, body { margin: 0; height: 100%; }
body {
  background: var(--void);
  color: var(--text);
  font: 300 15px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

:focus-visible { outline: 1px solid var(--vega); outline-offset: 3px; }

.wordmark {
  font: 500 1em/1 var(--display);
  letter-spacing: -0.03em;
  text-transform: lowercase;
  color: var(--text);
  white-space: nowrap;
  user-select: none;
}
/* The first i's dot as Vega: a dotless ı with a star set above it. */
.wordmark .vega { position: relative; display: inline-block; }
.wordmark .vega::before {
  content: ''; position: absolute; left: 50%; top: 0.095em; width: 0.12em; height: 0.12em;
  margin-left: -0.06em; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 0.05em var(--void), 0 0 0 0.075em rgba(var(--vega-rgb), 0.55);
}

.ui-btn {
  appearance: none; -webkit-appearance: none;
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(var(--vega-rgb), 0.28);
  border-radius: 3px;
  font: 400 12.5px/1 var(--body);
  letter-spacing: 0.02em;
  padding: 8px 13px;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, opacity 160ms ease;
}
.ui-btn:hover { border-color: rgba(var(--vega-rgb), 0.7); }
.ui-btn[disabled] { opacity: 0.3; cursor: default; }
.ui-btn .key { color: var(--grey); margin-left: 0.6em; font-weight: 300; }

.hairline { border-color: rgba(var(--vega-rgb), 0.18); }

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

@media (prefers-reduced-motion: reduce) {
  .ui-btn { transition: none; }
}