/* generated by build.mjs: the values of src/__ui/tokens.css, then site/site.css */
:root {
  --color-brand-600: #5f33e6;
  --color-brand-700: #4c24c2;
  --color-ink: #05080f;
  --color-neutral-0: #ffffff;
  --color-on-dark-brand: #b59eff;
  --color-on-dark-muted: #9aa1b2;
  --color-on-dark-text: #eef0f5;
  --font-family-sans: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-28: 28px;
  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --letter-spacing-tight: -0.01em;
  --line-height-normal: 1.45;
  --line-height-tight: 1.2;
  --rounded-full: 999px;
  --size-12: 12px;
  --size-2: 2px;
  --size-24: 24px;
  --size-3: 3px;
  --size-320: 320px;
  --size-48: 48px;
}

/* The placeholder landing page on the site hosts (www.jodl.app, jodl.app; phase 5, run D3). Not part of the app: no
   component, no Google Fonts or other outside resource. Colors, sizes and fonts only as var(--…) of src/__ui/tokens.css;
   build.mjs puts their values in front as :root and refuses a raw color here. */
html {
  color-scheme: dark;
}

body {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: var(--size-24);
  font-family: var(--font-family-sans);
  line-height: var(--line-height-normal);
  text-align: center;
  color: var(--color-on-dark-text);
  background: var(--color-ink);
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-12);
}

h1 {
  margin: 0 0 var(--size-24);
}

h1 > img {
  display: block;
  width: min(72vw, var(--size-320));
  height: auto;
}

p {
  margin: 0;
}

.claim {
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}

.soon {
  font-size: var(--font-size-18);
  color: var(--color-on-dark-muted);
}

.to-app {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--size-48);
  margin-top: var(--size-24);
  padding: 0 var(--size-24);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-0);
  text-decoration: none;
  background: var(--color-brand-600);
  border-radius: var(--rounded-full);
}

.to-app:hover {
  background: var(--color-brand-700);
}

.to-app:focus-visible {
  outline: var(--size-2) solid var(--color-on-dark-brand);
  outline-offset: var(--size-3);
}