/* Nightlight — the Sleepy design system, ported to the web.
   Token source of truth: BabySleep/iosApp/iosApp/DesignSystem/Theme.swift
   A dark room lit by one warm source. Gold is the light; edges are moonlight,
   not borders; text is never pure white. Dark-only, by design. */

:root {
  /* Background — the dark room. */
  --bg-base: rgb(18 18 22);
  --bg-gradient-top: rgb(22 22 27);
  --bg-gradient-bottom: rgb(16 16 20);

  /* Surfaces — cards. */
  --surface-grad-top: rgb(40 40 47);
  --surface-grad-bottom: rgb(33 33 38);
  --surface-elevated: rgb(44 44 52);

  /* Edges — simulated moonlight. */
  --edge-highlight: rgb(255 255 255 / 0.07);
  --edge-highlight-strong: rgb(255 255 255 / 0.12);
  --hairline: rgb(255 255 255 / 0.08);

  /* Gold — the one warm light source. */
  --gold: rgb(255 200 70);
  --gold-bright: rgb(255 205 92);
  --gold-deep: rgb(240 180 60);
  --gold-tint: rgb(255 200 70 / 0.08);
  --gold-halo: rgb(255 200 70 / 0.25);
  --on-gold: rgb(28 21 8);

  /* Text — never pure white (OLED halation at 3AM). */
  --text-primary: rgb(255 255 255 / 0.92);
  --text-secondary: rgb(255 255 255 / 0.62);
  --text-tertiary: rgb(255 255 255 / 0.40);

  /* Spacing scale: 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40. */
  --s4: 4px;   --s8: 8px;   --s12: 12px;  --s16: 16px;
  --s20: 20px; --s24: 24px; --s32: 32px;  --s40: 40px;
  --screen-margin: 20px;

  /* Radii — squircle-adjacent. */
  --radius-badge: 10px;
  --radius-tile: 16px;
  --radius-card: 20px;

  /* Type — SF Pro Rounded everywhere, except legal fine print. */
  --font-rounded: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN",
    system-ui, -apple-system, sans-serif;
  --font-system: system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg-base)
    linear-gradient(to bottom, var(--bg-gradient-top), var(--bg-gradient-bottom))
    fixed;
  color: var(--text-primary);
  font-family: var(--font-rounded);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Skip link — visible only when focused. */
.skip {
  position: absolute;
  left: -9999px;
  top: var(--s8);
  padding: var(--s8) var(--s16);
  background: var(--surface-elevated);
  border-radius: var(--radius-badge);
  color: var(--text-primary);
}
.skip:focus { left: var(--s16); z-index: 10; }

.wrap {
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--s40) var(--screen-margin) var(--s40);
}

/* ---- Header: the wordmark, with the moon as the single light source ---- */

.site-head {
  display: flex;
  align-items: center;
  gap: var(--s12);
  padding-bottom: var(--s32);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--s12);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--text-primary);
  text-decoration: none;
}

.wordmark .moon {
  width: 28px;
  height: 28px;
  color: var(--gold);
  filter: drop-shadow(0 0 10px var(--gold-halo));
}

/* ---- Type scale ---- */

h1 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1.2;
  margin: 0 0 var(--s8);
}

h2 {
  font-size: 20px;
  font-weight: 600;
  margin: var(--s32) 0 var(--s12);
  color: var(--text-primary);
}

h3 {
  font-size: 17px;
  font-weight: 600;
  margin: var(--s24) 0 var(--s8);
}

p, li { color: var(--text-secondary); }
p { margin: 0 0 var(--s16); }

.lede {
  font-size: 17px;
  color: var(--text-secondary);
  margin-bottom: var(--s24);
}

.kicker {
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0 0 var(--s8);
}

.updated {
  font-family: var(--font-system);
  font-size: 11px;
  color: var(--text-tertiary);
  margin: 0 0 var(--s32);
}

ul { padding-left: var(--s20); margin: 0 0 var(--s16); }
li { margin-bottom: var(--s8); }

strong { color: var(--text-primary); font-weight: 600; }

a { color: var(--gold); text-decoration-color: var(--gold-halo); text-underline-offset: 3px; }
a:hover { color: var(--gold-bright); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--s4);
}

/* ---- Card: surface gradient + moonlight top edge, never a border ---- */

.card {
  position: relative;
  background: linear-gradient(to bottom, var(--surface-grad-top), var(--surface-grad-bottom));
  border-radius: var(--radius-card);
  padding: var(--s24);
  margin-bottom: var(--s16);
  overflow: hidden;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 50%;
  background: linear-gradient(to bottom,
    var(--edge-highlight-strong) 0%,
    rgb(255 255 255 / 0.035) 18%,
    transparent 100%);
  pointer-events: none;
}

.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

/* A card that is also a link (the app list on the umbrella page). */
a.card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform 0.1s ease, background 0.2s ease;
}
a.card:hover { background: var(--surface-elevated); }
a.card:active { transform: scale(0.99); }
a.card .app-name { font-size: 17px; font-weight: 600; color: var(--text-primary); }
a.card .app-desc { font-size: 15px; color: var(--text-secondary); margin: var(--s4) 0 0; }

/* The one gold-tinted callout per page — the "we collect nothing" claim. */
.callout {
  background: var(--gold-tint);
  border-radius: var(--radius-tile);
  padding: var(--s20);
  margin: 0 0 var(--s24);
}
.callout p { margin: 0; color: var(--text-primary); }

/* ---- Fine print: intentionally NOT rounded ---- */

.fine, footer {
  font-family: var(--font-system);
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-tertiary);
}

footer {
  margin-top: var(--s40);
  padding-top: var(--s24);
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s16);
  justify-content: space-between;
}

footer a { color: var(--text-secondary); text-decoration: none; }
footer a:hover { color: var(--gold); }

footer nav { display: flex; flex-wrap: wrap; gap: var(--s16); }

/* Contact address — the one place we want a big, tappable target. */
.mail {
  display: inline-block;
  font-size: 17px;
  font-weight: 600;
  min-height: 44px;
  line-height: 44px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}