/* Brand tokens - see docs/brand.md */
:root {
  --night: #0E1B2C;
  --white: #F2F5F7;
  --yellow: #FFB000;
  --paper: #F3F5F8;
  --orange: #D9480F;

  --bg: var(--night);
  --fg: var(--white);
  --accent: var(--yellow);
  --muted: rgba(242, 245, 247, 0.65);
  --rule: rgba(242, 245, 247, 0.2);

  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: var(--paper);
    --fg: var(--night);
    --accent: var(--orange);
    --muted: rgba(14, 27, 44, 0.65);
    --rule: rgba(14, 27, 44, 0.2);
    color-scheme: light;
  }
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.topbar { display: flex; justify-content: flex-end; padding: 12px 16px; }

.lang select {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 6px 10px;
  font: inherit;
}
.lang select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px 16px;
  text-align: center;
}

.logo { width: min(520px, 90vw); height: auto; }

.tagline { margin: 0; font-size: 1.15rem; max-width: 32ch; }

.status { margin: 0; color: var(--accent); font-weight: 600; }

.footer { padding: 16px; text-align: center; color: var(--muted); font-size: 0.85rem; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}