html:root {
  --brand: 142 72% 36%;
  --brand-light: 151 68% 48%;
  --brand-h: 142;
  --brand-s: 72%;
  --brand-text: 142 72% 28%;
  --background: 138 42% 98%;
  --foreground: 155 28% 12%;
  --muted: 140 30% 93%;
  --muted-foreground: 153 12% 39%;
  --border: 142 24% 82%;
  --card: 0 0% 100%;
  --card-foreground: 155 28% 12%;
  --radius: 0.5rem;
  --site-font-body: ui-sans-serif, system-ui, sans-serif;
  --site-font-heading: ui-rounded, 'Arial Rounded MT Bold', ui-sans-serif, system-ui, sans-serif;
}

html.dark {
  --brand: 145 66% 45%;
  --brand-light: 151 72% 56%;
  --brand-h: 145;
  --brand-s: 66%;
  --brand-text: 145 68% 62%;
  --background: 155 28% 7%;
  --foreground: 138 35% 95%;
  --muted: 153 22% 13%;
  --muted-foreground: 145 13% 68%;
  --border: 151 18% 23%;
  --card: 154 25% 10%;
  --card-foreground: 138 35% 95%;
}

body {
  background-image:
    linear-gradient(135deg, hsl(var(--brand) / 0.035) 0 1px, transparent 1px 100%),
    linear-gradient(45deg, hsl(var(--brand-light) / 0.025) 0 1px, transparent 1px 100%);
  background-size:
    42px 42px,
    64px 64px;
}

::selection {
  background: hsl(var(--brand));
  color: white;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 800;
}

.prose h2,
.prose h3 {
  color: hsl(var(--foreground));
}

.prose h2 {
  text-decoration-color: hsl(var(--brand) / 0.35);
  text-decoration-line: underline;
  text-decoration-thickness: 0.18em;
  text-underline-offset: 0.2em;
}

.card {
  box-shadow: 0 10px 28px hsl(var(--brand) / 0.08);
}