/* louailabs.com. Tokens are the Louai app's (app/src/app.css): dark by default, light by the footer switch. */

:root {
  color-scheme: dark;
  --bg: #0e1015; --ink: #eceef2; --ink2: #8f949d; --line: #22252b; --ctl: #666c77;
  --lp: #a855f7; --lpo: 0.6; --lg: #00ff66; --lc: #ffffff;
  --sys: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
:root.light {
  color-scheme: light;
  --bg: #ffffff; --ink: #16181d; --ink2: #62666d; --line: #eaebee; --ctl: #787d86;
  --lp: #8b3fe0; --lpo: 1; --lg: #00a651; --lc: #05070b;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0 auto; max-width: 760px; min-height: 100vh; padding: 40px 24px;
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
  font: 16px/1.6 var(--sys); -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

a { color: inherit; text-decoration: underline; text-decoration-color: var(--ctl); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }

.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.mark { width: 22px; height: 32px; }
.lp { fill: var(--lp); opacity: var(--lpo); }
.lg { fill: var(--lg); }
.lc { fill: var(--lc); }
.wm { font: 800 17px/1 var(--mono); letter-spacing: 0.14em; }

main { flex: 1; padding: 96px 0 64px; }
h1 { font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0 0 32px; }
h2 { font-size: 16px; font-weight: 600; margin: 40px 0 8px; }
p { margin: 0 0 16px; }
ul { margin: 0 0 16px; padding-left: 20px; }
li { margin: 4px 0; }
.lead { font-size: 20px; line-height: 1.45; margin-bottom: 24px; }
.muted { color: var(--ink2); }

footer {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 14px; color: var(--ink2);
}
footer nav { display: flex; gap: 24px; }
footer a { text-decoration: none; }
footer a:hover, footer a[aria-current] { color: var(--ink); }
footer button { margin-left: auto;
  font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
}
footer button:hover { color: var(--ink); }
.to-dark, .light .to-light { display: none; }
.light .to-dark { display: inline; }

@media (max-width: 480px) {
  body { padding: 24px 16px; }
  main { padding: 64px 0 48px; }
  .lead { font-size: 18px; }
}