/* al0ft.com: the app's ground, ink and lift (src/server/public/style.css).
   Follows the system; the button (site.js) switches for this visit only. */
:root {
  color-scheme: light;
  --ground: #f6f4ef;
  --ink:    #1e2226;
  --faint:  #61686f;
  --lift:   #2f5d7c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) { color-scheme: dark; --ground: #12171b; --ink: #e8e6e1; --faint: #949ca2; --lift: #8db4d0; }
}
:root[data-theme='dark'] { color-scheme: dark; --ground: #12171b; --ink: #e8e6e1; --faint: #949ca2; --lift: #8db4d0; }

@font-face {
  font-family: 'AL0FT Inter';
  src: url('/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--ground);
  display: grid;
  place-items: center;
  padding: 0 16px;
}
.wordmark {
  margin: 0;
  font-family: 'AL0FT Inter', system-ui, sans-serif;
  font-size: clamp(48px, 12vw, 128px);
  font-weight: 700;
  letter-spacing: 0.06em; /* an all-caps wordmark needs positive tracking */
  line-height: 1;
  color: var(--ink);
}
.wordmark .o { color: var(--lift); }

/* Light or dark: a quiet button in the corner, showing where it would take you. */
.theme {
  position: fixed; top: 16px; right: 16px;
  width: 36px; height: 36px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--faint);
  cursor: pointer;
}
.theme:hover { color: var(--ink); }
.theme:focus-visible { outline: 2px solid var(--lift); outline-offset: 2px; }
.theme svg { width: 18px; height: 18px; }
.theme .sun { display: none; }
:root[data-theme='dark'] .theme .sun { display: block; }
:root[data-theme='dark'] .theme .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme .sun { display: block; }
  :root:not([data-theme='light']) .theme .moon { display: none; }
}