/* ─── Variables ─────────────────────────────────────────── */
:root {
  color-scheme: light;
  /* Colours — Flexoki light "paper" · https://stephango.com/flexoki */
  --color-text:               #100F0F;   /* Flexoki black — 18.6:1 on paper, AAA */
  --color-background:         #FFFCF0;   /* Flexoki paper — warm off-white */
  --color-link:               #1C6C66;   /* Flexoki cyan-700 — 6.0:1, AA */
  --color-link-hover:         #164F4A;   /* Flexoki cyan-800 — 9.1:1 */
  --color-muted:              #6F6E69;   /* Flexoki base-600 — 5.0:1, AA */
  --color-blockquote-border:  #DAD8CE;   /* Flexoki base-150 */
  --color-blockquote-text:    #575653;   /* Flexoki base-700 */
  --color-blockquote-bg:      #F2F0E5;   /* Flexoki base-50 */
  --color-code-text:          #403E3C;   /* Flexoki base-800 */
  --color-code-bg:            rgba(135, 133, 128, 0.20);
  --color-pre-bg:             #F2F0E5;
  --color-pre-border:         #E6E4D9;
  --color-selection:          #DAD8CE;

  --font-size-base:           1.0625rem;   /* 17px */
  --font-size-small:          0.9375rem;   /* 15px */
  --body-padding-top:         4rem;
  --transition-speed:         0.2s;
}

/* ─── Reset ─────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
ul, ol { padding-left: 1.5rem; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  a { transition: none; }
}

/* ─── Body & Layout ─────────────────────────────────────── */
body {
  position: relative;
  max-width: 40rem;   /* ~71 characters per line at 17px */
  padding: var(--body-padding-top) 1rem;
  margin: 0 auto;
  font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
  font-size: var(--font-size-base);
  font-size-adjust: 0.5;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-background);
}

/* ─── Links ─────────────────────────────────────────────── */
a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: color var(--transition-speed) ease,
              text-decoration-color var(--transition-speed) ease;
}
a:hover {
  color: var(--color-link-hover);
  text-decoration-color: currentColor;
}

/* ─── Selection & Focus ──────────────────────────────────── */
::selection { background-color: var(--color-selection); }
:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

/* ─── Headings ───────────────────────────────────────────── */
h1 { font-size: 2.125rem; font-weight: 700; line-height: 1.2; margin-bottom: 1rem; }
h2 { font-size: 1.75rem; font-weight: 600; margin-top: 2.5rem; margin-bottom: 0.75rem; line-height: 1.3; }
h3 { font-size: 1.5rem; font-weight: 600; margin-top: 2rem; margin-bottom: 0.75rem; line-height: 1.3; }
h4 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; margin-top: 1.5rem; margin-bottom: 0.75rem; }

/* ─── Body Copy ──────────────────────────────────────────── */
p { margin-bottom: 1.75rem; font-size: var(--font-size-base); }
strong, b { font-weight: 600; }

/* ─── Lists ──────────────────────────────────────────────── */
ul { list-style-type: disc; margin-bottom: 1.5rem; }
ul ul { margin-top: 0.25rem; margin-bottom: 0; }
li { margin: 0.25rem 0; }

/* ─── Blockquote ─────────────────────────────────────────── */
blockquote {
  border-left: 4px solid var(--color-blockquote-border);
  padding: 0 1em;
  color: var(--color-blockquote-text);
  background-color: var(--color-blockquote-bg);
  margin: 1.5rem 0;
  font-style: normal;
}
blockquote p { margin: 0.5rem 0; }

/* ─── Horizontal Rule ────────────────────────────────────── */
hr {
  border: none;
  border-top: 1px solid var(--color-blockquote-border);
  margin: 3rem 0;
}

/* ─── Images ─────────────────────────────────────────────── */
img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5rem auto;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}

/* ─── Tables ─────────────────────────────────────────────── */
table { border-collapse: collapse; margin: 1.5rem 0; }
th, td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--color-blockquote-border); text-align: left; }
th { font-weight: 600; }

/* ─── Inline Code & Code Blocks ──────────────────────────── */
code:not(pre code) {
  background-color: var(--color-code-bg);
  border-radius: 6px;
  padding: 0.2em 0.4em;
  font-size: 0.95em;
  color: var(--color-code-text);
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  overflow-wrap: break-word;
}
pre {
  background-color: var(--color-pre-bg);
  border: 1px solid var(--color-pre-border);
  border-radius: 6px;
  padding: 1rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  line-height: 1.45;
  color: var(--color-code-text);
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}
pre code { background: none; padding: 0; border-radius: 0; color: inherit; white-space: pre; }

/* ─── Mobile ─────────────────────────────────────────────── */
@media (max-width: 600px) {
  :root { --body-padding-top: 2rem; }
  body { padding-left: 0.75rem; padding-right: 0.75rem; }
  h1 { font-size: 1.9rem; line-height: 1.25; }
  h2 { font-size: 1.3rem; }
  h3 { font-size: 1.1875rem; }
  h4 { font-size: 1.125rem; }
  pre { padding: 0.75rem; }
  blockquote { padding: 0.5rem; }
  img { margin: 1rem auto; }
}

/* ─── Dark Theme ─────────────────────────────────────────── */
html[data-theme="dark"] {
  color-scheme: dark;
  --color-text:               #CECDC3;   /* Flexoki base-200 — 10.7:1, AAA */
  --color-background:         #1C1B1A;   /* Flexoki base-950 */
  --color-link:               #3AA99F;   /* Flexoki cyan-400 */
  --color-link-hover:         #5ABDAC;   /* Flexoki cyan-300 */
  --color-muted:              #878580;   /* Flexoki base-500 */
  --color-blockquote-border:  #403E3C;
  --color-blockquote-text:    #9F9D96;
  --color-blockquote-bg:      #282726;
  --color-code-text:          #CECDC3;
  --color-code-bg:            rgba(135, 133, 128, 0.18);
  --color-pre-bg:             #282726;
  --color-pre-border:         #403E3C;
  --color-selection:          #403E3C;
}
html[data-theme="dark"] img {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  filter: brightness(0.9);
}

/* ─── Print ──────────────────────────────────────────────── */
@media print {
  body { background: white; color: black; max-width: 100%; padding: 1rem; }
  a { color: black; text-decoration: underline; }
  a:visited { color: black; }
  img { box-shadow: none; page-break-inside: avoid; }
  pre { white-space: pre-wrap; overflow-wrap: break-word; border: 1px solid #ccc; }
}