/* Generated by design-system/build_tokens.py from design-system/tokens.json.
   Do not edit this file. Change tokens.json and run the script again.

   This copy is linked by the guided tour's gate pages.
   The same file is written into three other places; build_tokens.py says why.

   Read the design system's own README before using any of these. In particular: never
   write a colour, a font size or a spacing value straight into a stylesheet. Use the
   variables below, so that changing one value changes every screen at once.

   This banner names no document and no rule number on purpose. Every copy of this file is
   served to a visitor, who can read it with View Source, and the rule about what a refusal
   may say keeps every reference away from a visitor. The build check that enforces it is
   tests/build_checks/every_problem_names_a_rule.py. */

:root {
  --surface-page: #fafafb;
  --surface-raised: #ffffff;
  --surface-sunken: #f2f1f4;
  --surface-inverse: #16131a;
  --ink: #16131a;
  --ink-muted: #57525c;
  --ink-faint: #6f6a75;
  --ink-inverse: #fafafb;
  --accent: #6e2f59;
  --accent-hover: #57234a;
  --accent-soft: #efe3ec;
  --accent-contrast: #ffffff;
  --mark-rest: #8e8794;
  --rule: #e4e2e8;
  --rule-strong: #16131a;
  --focus: #6e2f59;
  --brand-plum: #6e2f59;
  --brand-plum-deep: #3e1d36;
  --brand-plum-mid: #8b4476;
  --brand-plum-soft: #b87ba4;
  --brand-plum-pale: #d6aec6;
  --brand-ink: #16131a;
  --brand-bone: #f7f5f8;
  --success: #2f6b4f;
  --warning: #8a5a12;
  --danger: #a32b33;
  --info: #35566e;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-11: 44px;
  --space-16: 64px;
  --space-25: 100px;
  --space-35: 140px;
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-pill: 999px;
  --opacity-ghost: 0.07;
  --opacity-rule: 0.3;
  --opacity-disabled: 0.4;
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-text: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --surface-page: #16131a;
  --surface-raised: #211d27;
  --surface-sunken: #1b1821;
  --surface-inverse: #fafafb;
  --ink: #f4f2f7;
  --ink-muted: #b8b2c0;
  --ink-faint: #8e8899;
  --ink-inverse: #16131a;
  --accent: #b87ba4;
  --accent-hover: #cf9bbb;
  --accent-soft: #3a2b38;
  --accent-contrast: #16131a;
  --mark-rest: #6b6377;
  --rule: #332e3b;
  --rule-strong: #f4f2f7;
  --focus: #cf9bbb;
  --brand-plum: #6e2f59;
  --brand-plum-deep: #3e1d36;
  --brand-plum-mid: #8b4476;
  --brand-plum-soft: #b87ba4;
  --brand-plum-pale: #d6aec6;
  --brand-ink: #16131a;
  --brand-bone: #f7f5f8;
  --success: #6fbf95;
  --warning: #d9a441;
  --danger: #e4707a;
  --info: #7fa8c4;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-11: 44px;
  --space-16: 64px;
  --space-25: 100px;
  --space-35: 140px;
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-pill: 999px;
  --opacity-ghost: 0.07;
  --opacity-rule: 0.3;
  --opacity-disabled: 0.4;
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-text: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --surface-page: #16131a;
  --surface-raised: #211d27;
  --surface-sunken: #1b1821;
  --surface-inverse: #fafafb;
  --ink: #f4f2f7;
  --ink-muted: #b8b2c0;
  --ink-faint: #8e8899;
  --ink-inverse: #16131a;
  --accent: #b87ba4;
  --accent-hover: #cf9bbb;
  --accent-soft: #3a2b38;
  --accent-contrast: #16131a;
  --mark-rest: #6b6377;
  --rule: #332e3b;
  --rule-strong: #f4f2f7;
  --focus: #cf9bbb;
  --brand-plum: #6e2f59;
  --brand-plum-deep: #3e1d36;
  --brand-plum-mid: #8b4476;
  --brand-plum-soft: #b87ba4;
  --brand-plum-pale: #d6aec6;
  --brand-ink: #16131a;
  --brand-bone: #f7f5f8;
  --success: #6fbf95;
  --warning: #d9a441;
  --danger: #e4707a;
  --info: #7fa8c4;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-11: 44px;
  --space-16: 64px;
  --space-25: 100px;
  --space-35: 140px;
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-pill: 999px;
  --opacity-ghost: 0.07;
  --opacity-rule: 0.3;
  --opacity-disabled: 0.4;
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-text: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: dark;
}

/* Display */
.display-xl { font-family: var(--font-display); font-size: 4.75rem; line-height: 4.875rem; font-weight: 400; letter-spacing: -0.015em; margin: 0; }
.display-l { font-family: var(--font-display); font-size: 3.75rem; line-height: 3.875rem; font-weight: 400; letter-spacing: -0.015em; margin: 0; }
.display-m { font-family: var(--font-display); font-size: 2.875rem; line-height: 3.125rem; font-weight: 400; letter-spacing: -0.01em; margin: 0; }
.display-s { font-family: var(--font-display); font-size: 2.375rem; line-height: 2.625rem; font-weight: 400; letter-spacing: -0.01em; margin: 0; }

/* Text */
.heading-l { font-family: var(--font-text); font-size: 1.5rem; line-height: 1.875rem; font-weight: 600; margin: 0; }
.heading-m { font-family: var(--font-text); font-size: 1.3125rem; line-height: 1.625rem; font-weight: 600; margin: 0; }
.heading-s { font-family: var(--font-text); font-size: 1.125rem; line-height: 1.4375rem; font-weight: 600; margin: 0; }
.body-l { font-family: var(--font-text); font-size: 1.25rem; line-height: 2.0625rem; font-weight: 400; margin: 0; }
.body-m { font-family: var(--font-text); font-size: 1.0625rem; line-height: 1.75rem; font-weight: 400; margin: 0; }
.body-s { font-family: var(--font-text); font-size: 0.9375rem; line-height: 1.5rem; font-weight: 400; margin: 0; }
.caption { font-family: var(--font-text); font-size: 0.8125rem; line-height: 1.25rem; font-weight: 400; margin: 0; }

/* Data */
.figure-l { font-family: var(--font-mono); font-size: 2.375rem; line-height: 2.375rem; font-weight: 700; margin: 0; }
.figure-m { font-family: var(--font-mono); font-size: 1.625rem; line-height: 1.625rem; font-weight: 700; margin: 0; }
.label { font-family: var(--font-mono); font-size: 0.6875rem; line-height: 0.9375rem; font-weight: 700; letter-spacing: 0.2em; margin: 0; }
.meta { font-family: var(--font-mono); font-size: 0.75rem; line-height: 1rem; font-weight: 400; letter-spacing: 0.08em; margin: 0; }


/* ── The breakpoints, and the layout values that change at them ──────────────────────
   Generated from the `breakpoint` section of tokens.json, the same as everything above.

   ⚠ A CUSTOM PROPERTY CANNOT BE USED IN AN @media QUERY. `@media (min-width:
   var(--bp-two-hands))` matches at no width at all, reports no error, and looks
   perfectly correct. That is why the queries below are generated rather than written by
   hand: it is the only way a width can have one home.

   ⚠ SO DO NOT PUT A WIDTH IN A STYLESHEET. Read one of the --layout-* values below
   instead. They already know which band they are in, and the build refuses a width
   written into the member screens' own stylesheet.

   The --bp-* values are here as well because a width is still useful outside a query --
   `max-width: var(--bp-arms-length)` is how the page stops growing. Every query is
   min-width, so the narrowest band is what holds when nothing else applies. */
:root {
  --bp-two-hands: 48rem;
  --bp-arms-length: 75rem;
  --layout-band: "one hand";
  --layout-gutter: var(--space-4);
  --layout-block-space: var(--space-6);
  --layout-columns: 1;
  --layout-shell-flow: column;
  --layout-nav-flow: row;
}

@media (min-width: 48rem) {
  :root {
    --layout-band: "two hands";
    --layout-gutter: var(--space-8);
    --layout-block-space: var(--space-8);
    --layout-columns: 2;
    --layout-shell-flow: row;
    --layout-nav-flow: column;
  }
}

@media (min-width: 75rem) {
  :root {
    --layout-band: "arm's length";
    --layout-gutter: var(--space-16);
    --layout-columns: 3;
  }
}