/* Hova Labs design tokens and base styles (github.com/HovaLabs/Hova-Labs-Website), shared by the landing page and the editor */
:root, [data-theme=light] {
  color-scheme: light;
  --bg: #f6f3ee; --surface: #fffdfa;
  --ink: #17150f; --ink2: #4a463f; --muted: #6b655c; --muted-inv: #a9a398; --faint: #9a9386;
  --line: rgba(23,21,15,.06); --line2: rgba(23,21,15,.08); --line3: rgba(23,21,15,.16); --track: rgba(23,21,15,.1);
  --nav: rgba(246,243,238,.85);
  --shadow: rgba(23,21,15,.25);
  --accent: #d9722b; --accent-ring: rgba(217,114,43,.22);
}
[data-theme=dark] {
  color-scheme: dark;
  --bg: #17150f; --surface: #1f1c16;
  --ink: #f6f3ee; --ink2: #c9c2b6; --muted: #a9a398; --muted-inv: #6b655c; --faint: #7a736a;
  --line: rgba(246,243,238,.08); --line2: rgba(246,243,238,.1); --line3: rgba(246,243,238,.2); --track: rgba(246,243,238,.12);
  --nav: rgba(23,21,15,.85);
  --shadow: rgba(0,0,0,.6);
}

[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: Manrope, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; transition: background .2s; }
input, select, textarea, button { font-family: inherit; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
::placeholder { color: var(--faint); }
h1, h2, h3, p { margin: 0; }
h1 em, h2 em, .accent-em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.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; }

/* buttons: solid ink that warms to the accent on hover, or a hairline outline */
.btn { display: inline-block; padding: 11px 14px; border: 1px solid var(--line3); background: transparent; color: var(--ink); border-radius: 12px; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; line-height: normal; text-decoration: none; text-align: center; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.btn:hover { border-color: var(--ink); color: var(--ink); }
.btn-primary { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); color: #f6f3ee; }
.btn-quiet { border-color: var(--line2); color: var(--muted); font-weight: 600; }
.btn-quiet:hover { color: var(--ink); }
/* the larger sizes used on hovalabs.com: a solid button, and a light pill for ink-coloured bands */
.btn-lg { padding: 14px 22px; font-size: 18px; }
.btn-pill { padding: 16px 28px; border-color: var(--bg); background: var(--bg); color: var(--ink); border-radius: 999px; font-size: 18px; }
.btn-pill:hover { background: var(--accent); border-color: var(--accent); color: #17150f; }
.grow { flex: 1; }
button:disabled { cursor: progress; }
.pill { padding: 5px 12px; border: 1px solid var(--line3); background: transparent; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink2); transition: border-color .15s, color .15s; }
.pill:hover { border-color: var(--ink); color: var(--ink); }

/* segmented chips, as the filter chips on hovalabs.com/work */
.tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line2); box-shadow: 0 8px 30px -18px var(--shadow); }
.tab { padding: 7px 20px; border-radius: 999px; border: none; font-size: 14px; font-weight: 700; cursor: pointer; background: transparent; color: var(--ink2); transition: background-color .15s, color .15s; }
.tab:hover { color: var(--ink); }
.tab[aria-pressed=true] { background: var(--ink); color: var(--bg); }

/* a moon-ish dot in a square outline button, as on the Hova Labs nav */
.theme-toggle { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line2); background: transparent; color: var(--muted); border-radius: 12px; cursor: pointer; transition: border-color .15s; }
.theme-toggle:hover { border-color: var(--ink); }
.theme-toggle .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); display: inline-block; box-shadow: inset 3px -2px 0 0 var(--bg); }