/* Tandem AI Advisors — generated from tokens.json.
   Site tuning: the paper, ink-muted, tint, hairline and on-* values in both
   themes are adjusted from the kit (Paper less yellow, Evening lighter);
   every text pair still meets WCAG AA. The ratios quoted in the comments
   below are the kit's originals and move by at most ±1.4. */
:root, [data-theme="paper"] {
  --paper: #f2efe8; /* Page and slide background. Lay the aged-paper texture (assets/Reference) over it at 8–12% opacity; never a flat white. */
  --paper-deep: #e6e1d6; /* Cards, callouts, table header rows and the second column of a one-pager. Text on it: ink, ink-muted, sage-deep, gold-deep. */
  --paper-tint: #f8f6f1; /* Input fields and the lightest relief inside a paper-deep card. */
  --ink: #2a2921; /* All headlines and body copy on paper, paper-deep, paper-tint, sage-tint and gold-tint (≥10:1 everywhere). The one-colour logo is printed in ink. */
  --ink-muted: #5a574e; /* Captions, taglines, metadata and secondary body on paper and paper-deep (6.1:1 / 5.4:1 in Paper). Never for headlines. */
  --sage: #7d8c6c; /* The human strand: illustration fills, the solid hexagon of the logo, large decorative shapes. Not for text under 24px (3.1:1 on paper). */
  --sage-deep: #4a5940; /* Primary button fill, links, eyebrow labels and any sage text on paper or paper-deep (6.4:1 / 5.7:1 in Paper). The text on a sage-deep fill is on-sage. */
  --sage-tint: #dadcd1; /* Soft highlight band behind a pull quote or a 'what you keep' column. Text on it: ink. */
  --gold: #9e8038; /* The AI strand: circuit-trace lines, node dots, the outlined hexagon of the logo, rules that carry meaning (3.2:1 on paper; on paper-deep use gold-deep). Fills such as a secondary button take on-gold text. */
  --gold-deep: #6b561f; /* Gold as text: numbers, price lines, the tagline attribution, small labels on paper and paper-deep (5.0:1 / 5.3:1 in Paper). */
  --gold-tint: #e7dec7; /* Highlight behind a key figure or a 'what changes' column. Text on it: ink. */
  --on-sage: #f2efe8; /* Text and icons on a sage-deep fill (6.4:1 Paper, 8.9:1 Evening). */
  --on-gold: #171612; /* Text and icons on a gold fill (4.8:1 Paper, 7.2:1 Evening). Never white on gold. */
  --hairline: #8b8470; /* Rules, table borders, input borders and card outlines at 1px (3.3:1 on paper; on paper-deep it drops to 2.9:1, so give a card on paper-deep no border at all). This brand separates with rules, never with shadows. */
  --focus: #4a5940; /* Focus ring: a 2px solid outline, offset 2px, on every interactive element in both themes (6.4:1 on paper, 8.9:1 in Evening). */
}
[data-theme="evening"] {
  --paper: #2c2b27;
  --paper-deep: #36352f;
  --paper-tint: #25241f;
  --ink: #eeeae0;
  --ink-muted: #c3bdae;
  --sage: #8a9978;
  --sage-deep: #b4c2a2;
  --sage-tint: #3d4336;
  --gold: #c6a75c;
  --gold-deep: #d9bf7d;
  --gold-tint: #524631;
  --on-sage: #23221e;
  --on-gold: #23221e;
  --hairline: #857f6d;
  --focus: #b4c2a2;
}
:root {
  --space-1: 4px; /* Between an icon and its label; inside a tag. */
  --space-2: 8px; /* Between a label and the field below it; list item gap. */
  --space-3: 12px; /* Button vertical padding; table cell padding. */
  --space-4: 16px; /* Card padding on small cards; between a heading and its paragraph. */
  --space-6: 24px; /* Card padding; gap between paragraphs and blocks; button horizontal padding. */
  --space-8: 32px; /* Gap between columns in a two-column one-pager. */
  --space-12: 48px; /* Between sections; slide side margins on a 16:9 layout. */
  --space-16: 64px; /* Top and bottom page margin of a one-pager; clear space around the logo at its largest sizes. */
  --radius-sm: 2px; /* Inputs, table cells, small tags. */
  --radius-md: 4px; /* Buttons and cards. */
  --radius-lg: 8px; /* Image frames and the largest callout panels only. */
  --font-serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --font-sans: "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, sans-serif;
  --text-display: 600 48px/52px var(--font-serif); /* One per one-pager or title slide. Sentence case, ink. */
  --text-h1: 600 34px/40px var(--font-serif); /* Section title on a slide or the top of a page. */
  --text-h2: 600 24px/30px var(--font-serif); /* Subsection and card titles. */
  --text-h3: 600 19px/26px var(--font-serif); /* Run-in headings inside body copy, table titles. */
  --text-quote: italic 400 22px/31px var(--font-serif); /* The tagline and pull quotes. Attribution beneath it in label, gold-deep. */
  --text-body: 400 17px/26px var(--font-sans); /* Paragraphs. 60–70 characters a line; ink on paper. */
  --text-body-small: 400 15px/22px var(--font-sans); /* Table cells, list items in dense collateral, form help text. */
  --text-lead: 400 20px/30px var(--font-sans); /* The first paragraph under a display headline. ink-muted. */
  --text-label: 600 13px/18px var(--font-sans); /* Eyebrows, column headers and buttons. Uppercase, sage-deep or gold-deep. */
  --text-caption: 400 13px/18px var(--font-sans); /* Photo credits, footnotes, slide footers. ink-muted. */
}
.display {
  font-family: var(--font-serif);
  font-size: 48px;
  line-height: 52px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.h1 {
  font-family: var(--font-serif);
  font-size: 34px;
  line-height: 40px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.h2 {
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: 0;
}
.h3 {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: 0;
}
.quote {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 31px;
  font-weight: 400;
  letter-spacing: 0;
  font-style: italic;
}
.body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 26px;
  font-weight: 400;
  letter-spacing: 0;
}
.body-small {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: 0;
}
.lead {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 30px;
  font-weight: 400;
  letter-spacing: 0;
}
.label {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.caption {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: 0;
}

/* ------------------------------------------------------------------
   Site addition (values copied from the blocks above; keep them in sync).
   Evening follows the OS dark setting on screens unless the visitor
   picks Paper in the footer toggle. Print always uses Paper.
    ------------------------------------------------------------------ */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="paper"]) {
    --paper: #2c2b27;
    --paper-deep: #36352f;
    --paper-tint: #25241f;
    --ink: #eeeae0;
    --ink-muted: #c3bdae;
    --sage: #8a9978;
    --sage-deep: #b4c2a2;
    --sage-tint: #3d4336;
    --gold: #c6a75c;
    --gold-deep: #d9bf7d;
    --gold-tint: #524631;
    --on-sage: #23221e;
    --on-gold: #23221e;
    --hairline: #857f6d;
    --focus: #b4c2a2;
  }
}
@media print {
  :root[data-theme="evening"] {
    --paper: #f2efe8;
    --paper-deep: #e6e1d6;
    --paper-tint: #f8f6f1;
    --ink: #2a2921;
    --ink-muted: #5a574e;
    --sage: #7d8c6c;
    --sage-deep: #4a5940;
    --sage-tint: #dadcd1;
    --gold: #9e8038;
    --gold-deep: #6b561f;
    --gold-tint: #e7dec7;
    --on-sage: #f2efe8;
    --on-gold: #171612;
    --hairline: #8b8470;
    --focus: #4a5940;
  }
}

/* QR codes stay dark-on-light in every theme: some phone cameras cannot
   read an inverted code. Paper values, never overridden for dark mode. */
:root {
  --qr-ink: #2a2921;
  --qr-paper: #f8f6f1;
}