/* ApnaKosh — placeholder page.
   Tokens lifted from docs/DESIGN-SYSTEM.md §2 so this page already looks like
   the product: one tint, system type, whitespace instead of borders, and dark
   mode as a first-class value swap rather than an inverted afterthought. */

:root {
  --bg: #f7f7fa;
  --elevated: #ffffff;
  --label: #0b0b0f;
  --label-2: #5e5e66;
  --label-3: #84848c;
  --tint: #0a66e8;
  --separator: rgba(0, 0, 0, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --elevated: #1c1c1e;
    --label: #f5f5f7;
    --label-2: #98989f;
    --label-3: #6e6e74;
    --tint: #3e8bff;
    --separator: rgba(255, 255, 255, 0.12);
  }
}

* { box-sizing: border-box; }

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

body {
  background: var(--bg);
  color: var(--label);
  font-family: -apple-system, system-ui, "SF Pro", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  display: grid;
  place-items: center;
  /* Safe areas: the page must clear the Dynamic Island and home indicator when
     saved to an iPhone home screen. */
  padding: calc(env(safe-area-inset-top) + 2rem) 1.5rem
           calc(env(safe-area-inset-bottom) + 2rem);
}

main {
  max-width: 26rem;
  text-align: center;
}

.mark {
  width: 44px;
  height: 44px;
  margin-bottom: 1.75rem;
  fill: none;
  stroke: var(--tint);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

h1 {
  margin: 0;
  font-size: 2.125rem;   /* type.largeTitle */
  font-weight: 700;
  letter-spacing: -0.02em;
}

.devanagari {
  margin: 0.35rem 0 0;
  font-size: 1.0625rem;
  color: var(--label-2);
}

.tagline {
  margin: 1.25rem 0 0;
  font-size: 1.0625rem;  /* type.body */
  color: var(--label);
}

.rule {
  width: 2.5rem;
  height: 1px;
  background: var(--separator);
  margin: 2rem auto;
}

.note {
  margin: 0;
  font-size: 0.9375rem;  /* type.subhead */
  line-height: 1.55;
  color: var(--label-2);
}

.status {
  margin: 2rem 0 0;
  font-size: 0.8125rem;  /* type.footnote */
  color: var(--label-3);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Status is dot + word, never colour alone — DESIGN-SYSTEM.md §7.9. */
.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tint);
}