/* GENERATED by packages/tokens/build.mjs. Do not edit.
 * Source: https://www.figma.com/design/4rMs93pvPW85s1kjD6Y8NH/Acrostic_Design-System?node-id=11626-3471
 * Pulled: 2026-09-18  ·  node 11626:3471
 * Two modes: the light set is :root, and [data-surface="dark"] re-declares only
 * the names that invert on the sidebar. Run node build.mjs after any change. */

:root {
  /* ---- Figma: colour, light ---- */
  --color-text-heading: #282A2F;
  --color-text-body: #000000;
  --color-text-placeholder: #777C84;
  --color-text-on-surface: #FFFFFF;
  --color-text-action: #FFFFFF;
  --color-text-error: #EF5350;
  --color-text-success: #4CC161;
  --color-text-disabled: #A0A4AB;
  --color-surface-on-surface: #FFFFFF;
  --color-surface-page: #F9F9FA;
  --color-surface-action: #000000;
  --color-surface-action-hover-transparent: #E2E4E7;
  --color-surface-error: #EF5350;
  --color-surface-error-subtle: #FFE5E5;
  --color-surface-success: #4CC161;
  --color-surface-success-subtle: #E7F9EA;
  --color-surface-warning: #EB9B00;
  --color-surface-information-subtle: #F1F2F4;
  --color-surface-disabled: #E2E4E7;
  --color-border-on-surface: #E2E4E7;
  --color-border-default: #777C84;
  --color-border-action: #000000;
  --color-border-error: #EF5350;
  --color-border-success: #4CC161;
  --color-border-warning: #EB9B00;
  --color-border-disabled: #E2E4E7;
  --color-icon-default: #777C84;
  --color-icon-on-surface: #000000;
  --color-icon-action: #FFFFFF;
  --color-icon-success: #4CC161;
  --color-icon-disabled: #A5A39E;

  /* ---- Figma: space ---- */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;

  /* ---- Figma: radius. full is a pill, not a circle: 999px on a rectangle. ---- */
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;

  /* ---- Figma: border width ---- */
  --border-thin: 1px;

  /* ---- app-owned: the states Figma does not define, and aliases for the four
         it now does. An alias resolves to the Figma token, so the value is
         written down once and the old name keeps working. ---- */
  --surface: var(--color-surface-on-surface);   /* = color/surface/on-surface */
  --surface-2: #F5F6F8;
  --ink-2: #4C4C52;
  --text-muted: #6B7178;
  --signal: #0A0A0B;
  --signal-ink: #2B2B31;
  --signal-soft: #EEEEF0;
  --good: #0E8A6A;
  --good-fill: var(--color-surface-success);   /* = color/surface/success */
  --good-soft: var(--color-surface-success-subtle);   /* = color/surface/success subtle */
  --warn: #B27A00;
  --warn-fill: var(--color-surface-warning);   /* = color/surface/warning */
  --warn-soft: #FFF5E6;
  --risk: #C0392B;
  --risk-fill: var(--color-surface-error);   /* = color/surface/error */
  --risk-soft: var(--color-surface-error-subtle);   /* = color/surface/error subtle */
  --info: #2563EB;
  --info-soft: #E7EEFC;
  --chrome: #0B0B0C;
  --chrome-ink: #ECECEF;
  --chrome-muted: #85858D;
  --chrome-line: #202024;

  /* ---- Figma: type. One custom property per axis, per role. ---- */
  --t-display-large-size: 52px;
  --t-display-large-line: 62px;
  --t-display-large-weight: 700;
  --t-display-large-tracking: -1px;
  --t-display-medium-size: 46px;
  --t-display-medium-line: 55px;
  --t-display-medium-weight: 700;
  --t-display-medium-tracking: -1px;
  --t-display-small-size: 36px;
  --t-display-small-line: 43px;
  --t-display-small-weight: 700;
  --t-display-small-tracking: -1px;
  --t-display-xsmall-size: 32px;
  --t-display-xsmall-line: 38px;
  --t-display-xsmall-weight: 700;
  --t-display-xsmall-tracking: -1px;
  --t-heading-h1-size: 23px;
  --t-heading-h1-line: 30px;
  --t-heading-h1-weight: 600;
  --t-heading-h1-tracking: -0.5px;
  --t-heading-h2-size: 20px;
  --t-heading-h2-line: 26px;
  --t-heading-h2-weight: 600;
  --t-heading-h2-tracking: -0.5px;
  --t-heading-h3-size: 18px;
  --t-heading-h3-line: 23px;
  --t-heading-h3-weight: 500;
  --t-heading-h3-tracking: -0.5px;
  --t-heading-h4-size: 16px;
  --t-heading-h4-line: 21px;
  --t-heading-h4-weight: 500;
  --t-heading-h4-tracking: -0.5px;
  --t-link-large-size: 18px;
  --t-link-large-line: 27px;
  --t-link-large-weight: 400;
  --t-link-large-tracking: 0px;
  --t-link-medium-size: 16px;
  --t-link-medium-line: 24px;
  --t-link-medium-weight: 500;
  --t-link-medium-tracking: 0px;
  --t-link-small-size: 14px;
  --t-link-small-line: 21px;
  --t-link-small-weight: 400;
  --t-link-small-tracking: 0px;
  --t-body-small-size: 14px;
  --t-body-small-line: 21px;
  --t-body-small-weight: 400;
  --t-body-small-tracking: 0px;
  --t-caption-size: 12px;
  --t-caption-line: 20px;
  --t-caption-weight: 400;
  --t-caption-tracking: 0px;
  --t-label-large-size: 16px;
  --t-label-large-line: 24px;
  --t-label-large-weight: 500;
  --t-label-large-tracking: 0px;
  --t-label-medium-size: 14px;
  --t-label-medium-line: 21px;
  --t-label-medium-weight: 500;
  --t-label-medium-tracking: 0px;
  --t-label-small-size: 13px;
  --t-label-small-line: 20px;
  --t-label-small-weight: 400;
  --t-label-small-tracking: 0px;
  --t-label-xsmall-size: 10px;
  --t-label-xsmall-line: 15px;
  --t-label-xsmall-weight: 500;
  --t-label-xsmall-tracking: 0px;

  --font-sans: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* THE DARK SURFACE. Put data-surface="dark" on the element, not on the page: the
   sidebar is dark inside a light app, so this is a scope and never a theme. Only
   the names that actually resolve differently are here; the rest inherit. */
[data-surface="dark"] {
  --color-text-body: #F9F9FA;
  --color-text-on-surface: #000000;
  --color-surface-on-surface: #000000;
  --color-surface-action: #FFFFFF;
  --color-border-on-surface: #282A2F;
  --color-icon-on-surface: #000000;
}

/* One class per role, so markup names the ROLE and never a pixel size. A heading
   that needs to be smaller is a different role, not a different font-size. The
   two Link roles carried from Acrostic_WIP share metrics with a body size, so
   they are emitted under both names rather than picking a winner. Body/Small is
   a role of its own in the new file and needs no alias. */
.t-display-large {
  font-size: var(--t-display-large-size);
  line-height: var(--t-display-large-line);
  font-weight: var(--t-display-large-weight);
  letter-spacing: var(--t-display-large-tracking);
}
.t-display-medium {
  font-size: var(--t-display-medium-size);
  line-height: var(--t-display-medium-line);
  font-weight: var(--t-display-medium-weight);
  letter-spacing: var(--t-display-medium-tracking);
}
.t-display-small {
  font-size: var(--t-display-small-size);
  line-height: var(--t-display-small-line);
  font-weight: var(--t-display-small-weight);
  letter-spacing: var(--t-display-small-tracking);
}
.t-display-xsmall {
  font-size: var(--t-display-xsmall-size);
  line-height: var(--t-display-xsmall-line);
  font-weight: var(--t-display-xsmall-weight);
  letter-spacing: var(--t-display-xsmall-tracking);
}
.t-heading-h1 {
  font-size: var(--t-heading-h1-size);
  line-height: var(--t-heading-h1-line);
  font-weight: var(--t-heading-h1-weight);
  letter-spacing: var(--t-heading-h1-tracking);
}
.t-heading-h2 {
  font-size: var(--t-heading-h2-size);
  line-height: var(--t-heading-h2-line);
  font-weight: var(--t-heading-h2-weight);
  letter-spacing: var(--t-heading-h2-tracking);
}
.t-heading-h3 {
  font-size: var(--t-heading-h3-size);
  line-height: var(--t-heading-h3-line);
  font-weight: var(--t-heading-h3-weight);
  letter-spacing: var(--t-heading-h3-tracking);
}
.t-heading-h4 {
  font-size: var(--t-heading-h4-size);
  line-height: var(--t-heading-h4-line);
  font-weight: var(--t-heading-h4-weight);
  letter-spacing: var(--t-heading-h4-tracking);
}
.t-link-large, .t-body-large {
  font-size: var(--t-link-large-size);
  line-height: var(--t-link-large-line);
  font-weight: var(--t-link-large-weight);
  letter-spacing: var(--t-link-large-tracking);
}
.t-link-medium {
  font-size: var(--t-link-medium-size);
  line-height: var(--t-link-medium-line);
  font-weight: var(--t-link-medium-weight);
  letter-spacing: var(--t-link-medium-tracking);
}
.t-link-small, .t-body-small {
  font-size: var(--t-link-small-size);
  line-height: var(--t-link-small-line);
  font-weight: var(--t-link-small-weight);
  letter-spacing: var(--t-link-small-tracking);
}
.t-body-small {
  font-size: var(--t-body-small-size);
  line-height: var(--t-body-small-line);
  font-weight: var(--t-body-small-weight);
  letter-spacing: var(--t-body-small-tracking);
}
.t-caption {
  font-size: var(--t-caption-size);
  line-height: var(--t-caption-line);
  font-weight: var(--t-caption-weight);
  letter-spacing: var(--t-caption-tracking);
}
.t-label-large {
  font-size: var(--t-label-large-size);
  line-height: var(--t-label-large-line);
  font-weight: var(--t-label-large-weight);
  letter-spacing: var(--t-label-large-tracking);
}
.t-label-medium {
  font-size: var(--t-label-medium-size);
  line-height: var(--t-label-medium-line);
  font-weight: var(--t-label-medium-weight);
  letter-spacing: var(--t-label-medium-tracking);
}
.t-label-small {
  font-size: var(--t-label-small-size);
  line-height: var(--t-label-small-line);
  font-weight: var(--t-label-small-weight);
  letter-spacing: var(--t-label-small-tracking);
}
.t-label-xsmall {
  font-size: var(--t-label-xsmall-size);
  line-height: var(--t-label-xsmall-line);
  font-weight: var(--t-label-xsmall-weight);
  letter-spacing: var(--t-label-xsmall-tracking);
}