/* kinlets.app: the house style, the Thursday club palette from the brand (design/brand/VISION.md):
   grass green, cream, fresh green and near-black ink, the system font. Colours are tokens; the dark
   scheme only redefines them. web/test/build.test.mjs checks every text colour against its background
   (WCAG AA). */

:root {
  --bg: #F2F6E4;
  --surface: #FAFCF3;
  --ink: #1C1714;
  --muted: #4D5A47;
  --rule: #D7E0C2;
  --accent: #3E6A3E;
  --fresh: #C5DB95;
  --link: #2F5530;
  --focus: #3E6A3E;
  --note-bg: #E4EDCD;
  --hero-bg: #3E6A3E;
  --hero-ink: #F2F6E4;
  --hero-accent: #C5DB95;
  --hero-focus: #F2F6E4;
  --button-bg: #F2F6E4;
  --button-ink: #2F5530;

  --gutter: 16px;
  --measure: 40rem;
  --wide: 64rem;
  --radius: 18px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1A281C;
    --surface: #223325;
    --ink: #F2F6E4;
    --muted: #C2CFB0;
    --rule: #34483A;
    --accent: #C5DB95;
    --fresh: #3E6A3E;
    --link: #C5DB95;
    --focus: #C5DB95;
    --note-bg: #26392A;
    --hero-bg: #2F5530;
    --hero-ink: #F2F6E4;
    --hero-accent: #C5DB95;
    --hero-focus: #F2F6E4;
    --button-bg: #C5DB95;
    --button-ink: #1C1714;
  }
}

@media (min-width: 40rem) {
  :root { --gutter: 32px; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

main { flex: 1; }

.wrap {
  width: 100%;
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

.wrap-wide { max-width: calc(var(--wide) + 2 * var(--gutter)); }

/* Skip link: hidden until focused. */
.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 10;
  padding: 0.5rem 0.9rem;
  border-radius: 10px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: 12px; }

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

a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

/* Brand: the app icon and the hand-lettered wordmark (both drawn, no font). */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}
.brand picture { display: block; }
.brand-icon {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 22.5%;
}
.brand-word { display: block; width: auto; height: 28px; }

.site-header { padding-block: 20px; }

/* Text pages: support, privacy, terms, 404. */
.page { padding-block: 24px 64px; }

.page h1,
.hero-title {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.page h1 {
  font-size: clamp(2rem, 6vw, 2.75rem);
  margin: 0.5rem 0 1.5rem;
}

.page h2 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.3;
  margin: 2.75rem 0 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}

.page p, .page ul { margin: 0 0 1rem; }
.page ul { padding-left: 1.25rem; }
.page li { margin-bottom: 0.6rem; }
.page li::marker { color: var(--accent); }
.page strong { font-weight: 650; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 0.05em 0.35em;
  overflow-wrap: anywhere;
}

.note {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background: var(--note-bg);
  border-left: 4px solid var(--accent);
  border-radius: 0 12px 12px 0;
}
.note p { margin: 0; }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2.5rem 0;
}

/* Home: the hero is grass green, with the cream wordmark. */
.hero {
  padding-block: 40px 56px;
  margin-bottom: 40px;
  background: var(--hero-bg);
  color: var(--hero-ink);
}
.hero :focus-visible { outline-color: var(--hero-focus); }

.hero .brand { margin: 0 0 2.5rem; gap: 0.9rem; }
.hero .brand-icon { width: 56px; height: 56px; box-shadow: 0 6px 18px rgb(0 0 0 / 0.2); }
.hero .brand-word { height: 44px; }

.hero-title {
  font-size: clamp(2.5rem, 9vw, 4.5rem);
  font-weight: 800;
  max-width: 12ch;
  margin: 0 0 1.25rem;
}

.lead {
  font-size: clamp(1.125rem, 2.6vw, 1.3125rem);
  line-height: 1.55;
  max-width: 34rem;
  margin: 0 0 2rem;
}

.button,
.soon {
  display: inline-block;
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  font-weight: 650;
  font-size: 1.0625rem;
  line-height: 1.2;
}

.button {
  background: var(--button-bg);
  color: var(--button-ink);
  text-decoration: none;
}
.button:hover { filter: brightness(1.06); }

.soon {
  margin: 0;
  border: 2px solid var(--hero-accent);
  color: var(--hero-ink);
}

.features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 0;
  margin: 0 0 64px;
  list-style: none;
}

@media (min-width: 48rem) {
  .features { grid-template-columns: 1fr 1fr; gap: 20px; }
}

.feature {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 24px;
}

.feature h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 0 0 0.5rem;
}
/* Two equal squares, as in the icon. */
.feature h3::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--accent);
  box-shadow: 19px 0 0 var(--fresh);
  margin-bottom: 14px;
}
.feature p { margin: 0; }

/* Footer. */
.site-footer {
  border-top: 1px solid var(--rule);
  padding-block: 28px 40px;
  color: var(--muted);
  font-size: 0.9375rem;
}
.site-footer p { margin: 0 0 0.75rem; }
.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}
.site-footer a { color: var(--link); }

@media (prefers-reduced-motion: no-preference) {
  .button { transition: filter 120ms ease; }
}

@media print {
  .skip, .site-footer nav { display: none; }
  body { background: #FFFFFF; color: #000000; }
}