/* 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 (#3eb0ea) measures 8.11:1,
   so dark needs no derived fill. the light theme darkens the accent to
   #0f6a99 so it still clears 3:1 as a focus ring on the pale background, and
   pairs it with white labels (5.93:1). */

:root {
  --bg: #050507;
  --surface: #101014;
  --ink: #f5f5f7;
  --muted: #8b8b94;
  --accent: #3eb0ea;
  --accent-ink: #0a0a0a;
  --focus: #3eb0ea;
  --danger: #f87171;
  --glass: rgba(16, 16, 20, 0.82);
  --field: rgba(245, 245, 247, 0.06);
  --border: rgba(245, 245, 247, 0.12);
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  --scrim: rgba(5, 5, 7, 0.72);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f3f5f8;
  --surface: #ffffff;
  --ink: #101014;
  --muted: #56606e;
  --accent: #0f6a99;
  --accent-ink: #ffffff;
  --focus: #0f6a99;
  --danger: #b91c1c;
  --glass: rgba(255, 255, 255, 0.86);
  --field: rgba(16, 16, 20, 0.04);
  --border: rgba(16, 16, 20, 0.12);
  --shadow: 0 20px 60px rgba(16, 16, 20, 0.14);
  --scrim: rgba(243, 245, 248, 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: #f3f5f8;
    --surface: #ffffff;
    --ink: #101014;
    --muted: #56606e;
    --accent: #0f6a99;
    --accent-ink: #ffffff;
    --focus: #0f6a99;
    --danger: #b91c1c;
    --glass: rgba(255, 255, 255, 0.86);
    --field: rgba(16, 16, 20, 0.04);
    --border: rgba(16, 16, 20, 0.12);
    --shadow: 0 20px 60px rgba(16, 16, 20, 0.14);
    --scrim: rgba(243, 245, 248, 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 Söhne / Söhne, a commercial face with no Google
     Fonts build. it stays first in the stack for anyone who has it installed;
     Inter (loaded from Google Fonts) is what renders for everyone else. */
  --font: "Söhne", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  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;
}