/* Precision (dark) design tokens. See web/marketing/Swipeys (1).zip handoff. */
:root {
  /* Surfaces */
  --hp-bg: #0A0B0E;
  --hp-panel: #111317;
  --hp-panel-2: #16181D;

  /* Ink */
  --hp-ink: #F2F3F5;
  --hp-ink-2: #A8AAB0;
  --hp-ink-3: #60636A;

  /* Hairlines */
  --hp-line: #23262D;
  --hp-line-2: #2E3138;

  /* Accent — used sparingly */
  --hp-lime: #C6F547;

  /* Type */
  --font-sans: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Aliases consumed by shared/keyboard.js (renderGrid) */
  --rule: var(--hp-line);
  --ink: var(--hp-ink);
  --ink3: var(--hp-ink-3);
  --accent: var(--hp-lime);
  --font-body: var(--font-sans);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--hp-bg);
  color: var(--hp-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

body {
  background-image:
    linear-gradient(to right,  rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: 0 0;
}

a { color: inherit; text-decoration: none; }

.mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.mono-up {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}