/* GENERATED by scripts/build-pages.cjs — edit design/tokens/, not this file.

   The base scale and palette of the civic site style: what a new
   deployment renders, and what this site wears. Same values as
   apps/web/src/generated/theme.css, from the same generator, narrowed to
   the tokens this site uses. docs/styles.css holds the handwritten half.

   The product switches modes on a data-mode attribute a runtime writes.
   A static site has no runtime, so this one follows the reader's own
   setting. Dark is its own palette, never light reversed, and it is
   complete: every color declared once below is declared again after it. */

:root {
  --er-size-folio-min: 0.6875rem;
  --er-size-folio-max: 0.75rem;
  --er-size-caption-min: 0.8125rem;
  --er-size-caption-max: 0.875rem;
  --er-size-body-min: 1rem;
  --er-size-body-max: 1.0625rem;
  --er-size-lead-min: 1.125rem;
  --er-size-lead-max: 1.3125rem;
  --er-size-h3-min: 1.25rem;
  --er-size-h3-max: 1.5rem;
  --er-size-h2-min: 1.625rem;
  --er-size-h2-max: 2.25rem;
  --er-size-h1-min: 2.25rem;
  --er-size-h1-max: 3.5rem;
  --er-space-3xs: 0.125rem;
  --er-space-2xs: 0.25rem;
  --er-space-xs: 0.5rem;
  --er-space-sm: 0.75rem;
  --er-space-md: 1rem;
  --er-space-lg: 1.5rem;
  --er-space-xl: 2.5rem;
  --er-space-2xl: 4rem;
  --er-space-3xl: 6rem;
  --er-width-hairline: 1px;
  --er-width-strong: 2px;
  --er-width-nameplate: 3px;
  --er-weight-regular: 400;
  --er-weight-medium: 500;
  --er-weight-semibold: 600;
  --er-weight-bold: 700;
  --er-duration-slow: 200ms;
  --er-easing-out: cubic-bezier(0, 0, 0.2, 1);
  --text-folio: clamp(var(--er-size-folio-min), 0.666rem + 0.09vw, var(--er-size-folio-max));
  --text-folio-leading: 1.2;
  --text-folio-tracking: 0.08em;
  --text-caption: clamp(var(--er-size-caption-min), 0.791rem + 0.09vw, var(--er-size-caption-max));
  --text-caption-leading: 1.45;
  --text-caption-tracking: 0.01em;
  --text-body: clamp(var(--er-size-body-min), 0.978rem + 0.09vw, var(--er-size-body-max));
  --text-body-leading: 1.6;
  --text-body-tracking: 0em;
  --text-lead: clamp(var(--er-size-lead-min), 1.059rem + 0.28vw, var(--er-size-lead-max));
  --text-lead-leading: 1.5;
  --text-lead-tracking: -0.005em;
  --text-h3: clamp(var(--er-size-h3-min), 1.162rem + 0.38vw, var(--er-size-h3-max));
  --text-h3-leading: 1.25;
  --text-h3-tracking: -0.01em;
  --text-h2: clamp(var(--er-size-h2-min), 1.405rem + 0.94vw, var(--er-size-h2-max));
  --text-h2-leading: 1.18;
  --text-h2-tracking: -0.015em;
  --text-h1: clamp(var(--er-size-h1-min), 1.81rem + 1.88vw, var(--er-size-h1-max));
  --text-h1-leading: 1.08;
  --text-h1-tracking: -0.02em;
  --space-3xs: var(--er-space-3xs);
  --space-2xs: var(--er-space-2xs);
  --space-xs: var(--er-space-xs);
  --space-sm: var(--er-space-sm);
  --space-md: var(--er-space-md);
  --space-lg: var(--er-space-lg);
  --space-xl: var(--er-space-xl);
  --space-2xl: var(--er-space-2xl);
  --space-3xl: var(--er-space-3xl);
  --rule-hairline-width: var(--er-width-hairline);
  --rule-strong-width: var(--er-width-strong);
  --rule-nameplate-width: var(--er-width-nameplate);
  --radius-base: 2px;
  --radius-large: 4px;
  --motion-slow: var(--er-duration-slow);
  --motion-ease: var(--er-easing-out);
  --weight-regular: var(--er-weight-regular);
  --weight-medium: var(--er-weight-medium);
  --weight-semibold: var(--er-weight-semibold);
  --weight-bold: var(--er-weight-bold);
}

:root {
  color-scheme: light;

  --brand-primary-rgb: 26 82 150;
  --brand-primary-dark-rgb: 16 56 106;
  --brand-surface-rgb: 250 250 249;
  --brand-surface-alt-rgb: 240 240 239;
  --brand-ink-rgb: 23 24 26;
  --brand-ink-muted-rgb: 80 83 89;
  --semantic-success-rgb: 20 92 56;
  --semantic-warning-rgb: 124 74 6;
  --color-surface-rgb: var(--brand-surface-rgb);
  --color-surface-alt-rgb: var(--brand-surface-alt-rgb);
  --color-text-primary-rgb: var(--brand-ink-rgb);
  --color-text-secondary-rgb: var(--brand-ink-muted-rgb);
  --color-accent-rgb: var(--brand-primary-rgb);
  --color-accent-strong-rgb: var(--brand-primary-dark-rgb);
  --rule-hairline-rgb: 218 218 218;
  --rule-strong-rgb: 125 126 126;
  --rule-nameplate-rgb: 23 24 26;
  --color-border-control-rgb: 132 132 133;
  --nameplate-rule-rgb: var(--rule-nameplate-rgb);
  --nameplate-text-rgb: var(--color-text-primary-rgb);
  --section-rule-rgb: var(--rule-strong-rgb);
  --folio-rule-rgb: var(--rule-hairline-rgb);
  --folio-text-rgb: var(--color-text-secondary-rgb);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --brand-primary-rgb: 128 178 238;
    --brand-primary-dark-rgb: 172 208 248;
    --brand-surface-rgb: 25 26 28;
    --brand-surface-alt-rgb: 37 39 42;
    --brand-ink-rgb: 238 238 236;
    --brand-ink-muted-rgb: 174 178 184;
    --semantic-success-rgb: 126 204 152;
    --semantic-warning-rgb: 234 180 92;
    --color-surface-rgb: var(--brand-surface-rgb);
    --color-surface-alt-rgb: var(--brand-surface-alt-rgb);
    --color-text-primary-rgb: var(--brand-ink-rgb);
    --color-text-secondary-rgb: var(--brand-ink-muted-rgb);
    --color-accent-rgb: var(--brand-primary-rgb);
    --color-accent-strong-rgb: var(--brand-primary-dark-rgb);
    --rule-hairline-rgb: 55 56 57;
    --rule-strong-rgb: 142 143 142;
    --rule-nameplate-rgb: 238 238 236;
    --color-border-control-rgb: 136 136 136;
    --nameplate-rule-rgb: var(--rule-nameplate-rgb);
    --nameplate-text-rgb: var(--color-text-primary-rgb);
    --section-rule-rgb: var(--rule-strong-rgb);
    --folio-rule-rgb: var(--rule-hairline-rgb);
    --folio-text-rgb: var(--color-text-secondary-rgb);
  }
}

/* Print palette. Paper has no dark mode: a reader who prints a page from
   a dark screen gets the light edition. Every rule on this site reads the
   ink, ground, and rule tokens and nothing else, so re-pointing them here
   is the whole switch and no print rule has to know a mode exists.

   `prefers-color-scheme` still reports dark while printing, so the block
   above still matches. This one carries the same `:root` specificity and
   comes after it, which is what settles it. The product needs a selector
   list here because a runtime writes its mode onto the element; a static
   site has no runtime, so source order is enough. */
@media print {
  :root {
    color-scheme: light;

    --brand-primary-rgb: 26 82 150;
    --brand-primary-dark-rgb: 16 56 106;
    --brand-surface-rgb: 250 250 249;
    --brand-surface-alt-rgb: 240 240 239;
    --brand-ink-rgb: 23 24 26;
    --brand-ink-muted-rgb: 80 83 89;
    --semantic-success-rgb: 20 92 56;
    --semantic-warning-rgb: 124 74 6;
    --color-surface-rgb: var(--brand-surface-rgb);
    --color-surface-alt-rgb: var(--brand-surface-alt-rgb);
    --color-text-primary-rgb: var(--brand-ink-rgb);
    --color-text-secondary-rgb: var(--brand-ink-muted-rgb);
    --color-accent-rgb: var(--brand-primary-rgb);
    --color-accent-strong-rgb: var(--brand-primary-dark-rgb);
    --rule-hairline-rgb: 218 218 218;
    --rule-strong-rgb: 125 126 126;
    --rule-nameplate-rgb: 23 24 26;
    --color-border-control-rgb: 132 132 133;
    --nameplate-rule-rgb: var(--rule-nameplate-rgb);
    --nameplate-text-rgb: var(--color-text-primary-rgb);
    --section-rule-rgb: var(--rule-strong-rgb);
    --folio-rule-rgb: var(--rule-hairline-rgb);
    --folio-text-rgb: var(--color-text-secondary-rgb);
  }
}