/* Capsario's own look - the site's token file, written by hand (README "The look"). Every colour value of the
   site lives here; style.css uses only these names. make-images.py reads the first two blocks that hold --bg
   (light, then dark) for og.png and the favicons. */

/* type, spacing, radii - the same in both themes */
:root {
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --display-w: 400;
  --sans: "IBM Plex Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  /* 6 steps: label, small, body, lead, section head, page head; --t-d is the one exception, the serif sub-head */
  --t-xs: 0.8125rem;
  --t-s: 0.9375rem;
  --t-m: 1.0625rem;
  --t-l: clamp(1.1875rem, 1.05rem + 0.45vw, 1.4375rem);
  --t-xl: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem);
  --t-2xl: clamp(2.5rem, 1.2rem + 5.4vw, 4.5rem);
  --t-d: clamp(1.625rem, 1.3rem + 1vw, 2.125rem);
  /* spacing: 4 8 16 24 40 64 96 160 */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 1rem; --s-4: 1.5rem; --s-5: 2.5rem; --s-6: 4rem; --s-7: 6rem; --s-8: 10rem;
  --r-s: 8px; --r-m: 14px; --r-l: 24px; --r-pill: 999px;
  --wrap: 80rem;
  --measure: 36rem;
}

/* colours, light: paper, ink, the seal accent, a stone tint; the dark band is the ink itself */
:root {
  --bg: #f6f3ed; --surface: #fffdf9; --tint: #ece6db; --fg: #142328; --muted: #56605f;
  --accent: #b9461a; --on-accent: #ffffff; --mark: #f6dccb;
  --band: #142328; --on-band: #f6f3ed; --band-muted: #a9b3b1; --band-accent: #ef8a5c;
  --wait: #8c6000;
  --shadow: 0 1px 2px rgba(20, 35, 40, 0.06), 0 24px 60px -28px rgba(20, 35, 40, 0.32);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0e1719; --surface: #1d3036; --tint: #16262b; --fg: #ece6db; --muted: #a2aba9;
  --accent: #ef8a5c; --on-accent: #1b0d05; --mark: #4a2a1c;
  --band: #24414a; --on-band: #ece6db; --band-muted: #a9b3b1; --band-accent: #f19a70;
  --wait: #e2b65c;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 24px 60px -28px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
} }
:root[data-theme="dark"] {
  --bg: #0e1719; --surface: #1d3036; --tint: #16262b; --fg: #ece6db; --muted: #a2aba9;
  --accent: #ef8a5c; --on-accent: #1b0d05; --mark: #4a2a1c;
  --band: #24414a; --on-band: #ece6db; --band-muted: #a9b3b1; --band-accent: #f19a70;
  --wait: #e2b65c;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 24px 60px -28px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}