/* void family tokens from this app's catalog record (palette, radius, density).
   dark is native and carries the record's palette verbatim. light is the
   derived counterpart so the house theme rule (real light and dark, no flash)
   holds. every text and focus pair is measured by scripts/contrast.mjs and
   enforced by test/contrast.test.js; the ratios are written into AGENTS.md.

   the record's accent-ink (#0a0a0a) on its accent (#34d399) clears 4.5:1, so
   dark needs no derived fill. the light theme darkens the accent to #047857
   so it still clears 3:1 as a focus ring on the pale background, and pairs it
   with white labels. */

:root {
  --bg: #030305;
  --surface: #0d0d12;
  --ink: #f2f2f5;
  --muted: #87878f;
  --accent: #34d399;
  --accent-ink: #0a0a0a;
  --focus: #34d399;
  --second: #a78bfa;
  --danger: #f87171;
  --glass: rgba(13, 13, 18, 0.84);
  --field: rgba(242, 242, 245, 0.06);
  --border: rgba(242, 242, 245, 0.12);
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  --scrim: rgba(3, 3, 5, 0.72);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --ink: #0d0d12;
  --muted: #5b5b66;
  --accent: #047857;
  --accent-ink: #ffffff;
  --focus: #047857;
  --second: #6d28d9;
  --danger: #b91c1c;
  --glass: rgba(255, 255, 255, 0.88);
  --field: rgba(13, 13, 18, 0.04);
  --border: rgba(13, 13, 18, 0.12);
  --shadow: 0 20px 60px rgba(13, 13, 18, 0.14);
  --scrim: rgba(244, 245, 247, 0.78);
  color-scheme: light;
}

/* system mode: no data-theme attribute, so the visitor's os setting decides.
   this block must stay identical to the light block above; the contrast test
   checks that it does. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f4f5f7;
    --surface: #ffffff;
    --ink: #0d0d12;
    --muted: #5b5b66;
    --accent: #047857;
    --accent-ink: #ffffff;
    --focus: #047857;
    --second: #6d28d9;
    --danger: #b91c1c;
    --glass: rgba(255, 255, 255, 0.88);
    --field: rgba(13, 13, 18, 0.04);
    --border: rgba(13, 13, 18, 0.12);
    --shadow: 0 20px 60px rgba(13, 13, 18, 0.14);
    --scrim: rgba(244, 245, 247, 0.78);
    color-scheme: light;
  }
}

:root {
  /* radius 14 and tight density, from the record */
  --radius: 14px;
  --radius-sm: 8px;
  --gap: 8px;
  --pad: 14px;
  --target: 44px;
  /* the record's type pair is Neue Haas Grotesk / Inter. neue haas grotesk is
     a commercial face with no Google Fonts build, so it stays first in the
     display stack for anyone who has it installed; Inter (loaded from Google
     Fonts) is the body face and renders the display lines everywhere else. */
  --font-display: "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
}

body {
  font-family: var(--font);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

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

button,
input,
select {
  font-family: inherit;
  font-size: inherit;
}

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