/* blog.gauffin.org's design, laid over the engine's neutral base; lives as design.css in the blog's folder.
   Tokens shared with gauffin's public site: one Nordic palette, themed via [data-theme].
   Lichen-grey surfaces (spruce-night in dark), spruce ink, heather for everything the reader acts on, cloudberry
   only for selection; pine green, birch ochre and falu red for code and notices. Every text color
   holds WCAG AA (4.5:1) against the page background. */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&family=Hanken+Grotesk:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500&display=swap");

:root {
  --bg: #e9ece6;
  --panel: #f2f4ef;
  --panel-2: #e1e5dd;
  --ink: #1f2a24;
  --soft: #4e5a52;
  --faint: #5f6860;
  --line: #d3d9cf;
  --line-2: #dbe0d6;
  --accent: #6a3f6b;
  --on-accent: #fff;
  --warm: #a2571d;
  --on-warm: #fff;
  --chip-bg: #e3dae1;
  --chip-line: #d2c4cf;
  --chip-text: #5a3559;
  --toggle-bg: #dfe3da;
  --card-soft: #eef1ea;
  --shadow: rgba(25, 35, 28, 0.08);
  --notice-bg: #ece5cf;
  --notice-text: #7a5f18;
  --danger: #9b3a2e;
  --code-keyword: #9b3a2e;
  --code-string: #3e6b57;
  --code-comment: #5f6860;
  --code-type: #6a3f6b;
  --code-number: #7a5f18;
  --code-title: #1f2a24;
  --serif: "Newsreader", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, monospace;
}

:root[data-theme="dark"] {
  --bg: #151a17;
  --panel: #1c221e;
  --panel-2: #232a25;
  --ink: #e8ece6;
  --soft: #a5ada4;
  --faint: #8a9289;
  --line: #2f3731;
  --line-2: #2f3731;
  --accent: #c9a3c8;
  --on-accent: #24142a;
  --warm: #e3a066;
  --on-warm: #24160a;
  --chip-bg: #2a2230;
  --chip-line: #3d3045;
  --chip-text: #d8bbd6;
  --toggle-bg: #202722;
  --card-soft: #181e1a;
  --shadow: rgba(0, 0, 0, 0.35);
  --notice-bg: rgba(214, 190, 120, 0.15);
  --notice-text: #d6be78;
  --danger: #de8c7d;
  --code-keyword: #de8c7d;
  --code-string: #8fc4aa;
  --code-comment: #8a9289;
  --code-type: #c9a3c8;
  --code-number: #d6be78;
  --code-title: #e8ece6;
}