/* Perfacta Keystone — generated from tokens.json */
:root, [data-theme="light"] {
  --limewash: #f0f2ea; /* Canvas. The default ground on screen and in print. */
  --plaster: #f8f9f4; /* Raised panels and cards on lime-wash. Added for this book – not in the first palette. */
  --moss: #24352b; /* Ink. Text on lime-wash and plaster (11.5:1), the line of work. Also the dark ground for Enterprise and footers. */
  --moss-raised: #2e4237; /* Raised panels on moss. Added for this book. */
  --fir: #3e5a47; /* The keystone – done. Buttons, links and accent text on lime-wash (6.7:1). */
  --lichen: #56675a; /* Secondary text on lime-wash and plaster (5.3:1). Added for this book. */
  --sage: #9db49a; /* The stones people hold. Secondary text and the keystone on moss (5.8:1). Moss text on it reads 5.8:1. */
  --clay: #cf8f72; /* The stones agents and models lay. Fills only – never text (2.4:1 on lime-wash). */
  --clay-deep: #b8775a; /* The shaded side of clay stones in illustration. Fills only. Added for this book. */
  --mortar: #d6dacc; /* The joints: hairlines and borders on lime-wash and plaster. */
  --mortar-dark: #3b4f43; /* Hairlines and borders on moss. Added for this book. */
  --surface: var(--limewash); /* Page ground. Follows the theme. */
  --surface-raised: var(--plaster); /* Cards and panels on the page ground. */
  --ink: var(--moss); /* Primary text and line work on surface and surface-raised. */
  --ink-muted: var(--lichen); /* Secondary text, captions and labels on surface and surface-raised. */
  --line: var(--mortar); /* Hairlines, borders and dividers. */
  --accent: var(--fir); /* Done: primary button fill, links, the keystone. Reads as text on both grounds. */
  --on-accent: var(--limewash); /* Text and icons on an accent fill. */
  --focus-ring: 0 0 0 2px #f0f2ea, 0 0 0 4px #3e5a47; /* Keyboard focus: a 2px gap in the ground color, then a solid 2px ring. */
}
[data-theme="dark"] {
  --surface: var(--moss);
  --surface-raised: var(--moss-raised);
  --ink: var(--limewash);
  --ink-muted: var(--sage);
  --line: var(--mortar-dark);
  --accent: var(--sage);
  --on-accent: var(--moss);
  --focus-ring: 0 0 0 2px #24352b, 0 0 0 4px #9db49a;
}
:root {
  --space-1: 4px; /* Icon to label. */
  --space-2: 8px; /* Inside controls. */
  --space-3: 12px; /* Between related lines. */
  --space-4: 16px; /* Gaps between panels. */
  --space-6: 24px; /* Panel padding. */
  --space-8: 32px; /* Card padding, page gutter. */
  --space-12: 48px; /* Between blocks on a page. */
  --space-16: 64px; /* Between sections. */
  --radius-sm: 6px; /* Buttons, inputs, chips. */
  --radius-md: 12px; /* Panels inside a card. */
  --radius-lg: 20px; /* Cards and boards. */
  --radius-full: 9999px; /* Status chips and avatars. */
  --font-display: Rubik, "Helvetica Neue", Arial, sans-serif;
  --font-text: Commissioner, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Fira Mono", ui-monospace, Menlo, monospace;
  --text-headline: 300 56px/60px var(--font-display); /* Page and poster headlines. Sentence case, one per view. */
  --text-subline: 300 28px/36px var(--font-display); /* The sentence under a headline. */
  --text-heading: 500 20px/28px var(--font-display); /* Section and card headings. */
  --text-body: 400 16px/26px var(--font-text); /* Running text. */
  --text-annotation: 400 13px/20px var(--font-text); /* Notes, captions, helper text. */
  --text-button: 500 15px/20px var(--font-text); /* Buttons and navigation. */
  --text-label: 500 12px/16px var(--font-mono); /* Upper-case labels and trace data. Tabular figures. */
}
.headline {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 60px;
  font-weight: 300;
  letter-spacing: -0.02em;
}
.subline {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 36px;
  font-weight: 300;
  letter-spacing: -0.01em;
}
.heading {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.body {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  letter-spacing: 0;
}
.annotation {
  font-family: var(--font-text);
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.button {
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0;
}
.label {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
}
@font-face {
  font-family: "Rubik";
  src: url("fonts/Rubik-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Commissioner";
  src: url("fonts/Commissioner-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fira Mono";
  src: url("fonts/FiraMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fira Mono";
  src: url("fonts/FiraMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}