/* Jola website. Colours mirror src/theme/tokens.ts (light and dark). */
:root {
  --ground: #fdf8f5;
  --surface: #ffffff;
  --hairline: #f0e4e2;
  --field: #f2d3d6;
  --on-field: #2e2a33;
  --on-field-muted: #6b4a52;
  --ink: #2e2a33;
  --ink-muted: #6e6470;
  --action: #2e7a75;
  --action-soft: #ddf1ee;
  --on-action-soft: #1f5f5b;
  --display: 'Young Serif', Georgia, serif;
  --body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #1c1820;
    --surface: #27222b;
    --hairline: #3a3240;
    --field: #4a2f38;
    --on-field: #f4eef1;
    --on-field-muted: #e8c9d0;
    --ink: #f4eef1;
    --ink-muted: #b9aeb8;
    --action: #7fcfc4;
    --action-soft: #1e3b39;
    --on-action-soft: #bfe9e3;
  }
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 17px/1.6 var(--body);
}

a {
  color: var(--action);
  text-underline-offset: 3px;
}

.wrap {
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header: the rose field, as on the app's Home. */
.top {
  background: var(--field);
  color: var(--on-field);
  border-radius: 0 0 28px 28px;
}

.top nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 20px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  color: var(--on-field);
  font: 26px/1.2 var(--display);
  text-decoration: none;
}

.brand img {
  width: 40px;
  height: 40px;
}

.top nav a:not(.brand) {
  color: var(--on-field-muted);
  font-size: 15px;
  padding: 12px 0;
}

.hero {
  padding-top: 24px;
  padding-bottom: 40px;
}

.hero h1 {
  margin: 0 0 12px;
  font: 34px/1.2 var(--display);
}

.hero p {
  margin: 0;
  color: var(--on-field-muted);
  font-size: 19px;
}

main {
  padding-top: 32px;
  padding-bottom: 48px;
}

h1 {
  font: 30px/1.25 var(--display);
  margin: 0 0 8px;
}

h2 {
  font-size: 22px;
  line-height: 1.3;
  margin: 36px 0 8px;
}

h3 {
  font-size: 17px;
  margin: 24px 0 4px;
}

.meta {
  color: var(--ink-muted);
  font-size: 15px;
  margin-top: 0;
}

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 4px 20px;
  margin: 16px 0;
}

.note {
  background: var(--action-soft);
  color: var(--on-action-soft);
  border-radius: 16px;
  padding: 14px 20px;
  margin: 16px 0;
}

.note a {
  color: inherit;
}

ul,
ol {
  padding-left: 1.3em;
}

li + li {
  margin-top: 4px;
}

footer {
  border-top: 1px solid var(--hairline);
  color: var(--ink-muted);
  font-size: 15px;
  padding: 20px 0 32px;
}

footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}

footer a {
  color: var(--ink-muted);
}

.card > :first-child {
  margin-top: 16px;
}