/*! Civic design system 1.0.0 (2026-11-07). Tokens: every value the components read.
   Light on :root. Dark follows the visitor's system preference unless the page sets
   data-theme="light" or data-theme="dark" on <html>. Accent presets switch with
   data-accent="teal" or data-accent="brick" on <html>; they only touch accent, link and button tokens.
   Every text pair here measures 7:1 or more in both themes. Nothing is smaller than 16px. */

:root {
  color-scheme: light;

  /* Surfaces: white pages, warm paper bands, a deeper well for table heads and quiet fills */
  --ci-canvas: #ffffff;
  --ci-surface: #ffffff;
  --ci-paper: #f7f5f0;
  --ci-well: #f0ede6;

  /* Text: deep navy ink */
  --ci-ink: #0c2340;
  --ci-body: #1b2b3f;
  --ci-muted: #3b4a5e;

  /* Lines: hairlines for structure, a stronger rule, and the 2px control border */
  --ci-line: #c9d0d9;
  --ci-line-strong: #6b7a8c;
  --ci-control: #2e4057;

  /* Masthead: the navy band at the top of every page */
  --ci-mast: #0c2340;
  --ci-mast-ink: #ffffff;
  --ci-mast-muted: #d3ddea;
  --ci-mast-line: #3a5470;

  /* Links and accent: civic blue. Links are always underlined */
  --ci-link: #174a87;
  --ci-link-hover: #0c2340;
  --ci-accent: #174a87;
  --ci-accent-soft: #e7eef7;
  --ci-accent-ink: #ffffff;

  /* Primary button */
  --ci-primary: #174a87;
  --ci-primary-hover: #0c2340;
  --ci-primary-ink: #ffffff;

  /* Gold means "look here": focus rings and the important-notice bar. Never text on white. */
  --ci-focus: #f5b731;
  --ci-focus-halo: #0c2340;
  --ci-focus-ink: #0c2340;
  --ci-gold-soft: #fff5d6;

  /* Status: always an icon and a word as well as a color */
  --ci-success: #0e5a2c;
  --ci-success-soft: #e6f2e9;
  --ci-warning: #6a4300;
  --ci-warning-soft: #fcede3;
  --ci-warning-bar: #b8570a;
  --ci-danger: #8e1418;
  --ci-danger-soft: #fbeaea;

  /* Inverted fill: toasts and tooltips */
  --ci-invert: #0c2340;
  --ci-invert-ink: #ffffff;
  --ci-invert-muted: #d3ddea;

  /* Backdrop behind dialogs */
  --ci-scrim: rgba(12, 35, 64, 0.62);

  /* Data viz: categorical (3:1 on canvas, surface and paper; neighbors differ in lightness) */
  --ci-viz-1: #174a87;
  --ci-viz-2: #c25e0a;
  --ci-viz-3: #4f8fcf;
  --ci-viz-4: #9b2f24;
  --ci-viz-5: #2f7d6f;
  --ci-viz-6: #7a5a00;
  /* Sequential ramp, low to high */
  --ci-seq-1: #dbe6f3;
  --ci-seq-2: #a9c3e3;
  --ci-seq-3: #6f97c9;
  --ci-seq-4: #3a6aa6;
  --ci-seq-5: #174a87;
  /* Diverging ramp, brick to blue through stone */
  --ci-div-1: #9b2f24;
  --ci-div-2: #d98c78;
  --ci-div-3: #e4e0d6;
  --ci-div-4: #6f97c9;
  --ci-div-5: #174a87;

  /* Elevation: Civic is flat. Only dialogs, toasts and tooltips lift */
  --ci-shadow-raise: 0 2px 0 rgba(12, 35, 64, 0.08);
  --ci-shadow-pop: 0 2px 4px rgba(12, 35, 64, 0.12), 0 16px 40px -12px rgba(12, 35, 64, 0.32);

  /* Type: one family for everything, a mono for reference numbers and codes */
  --ci-font-sans: "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, sans-serif;
  --ci-font-mono: "Atkinson Hyperlegible Mono", ui-monospace, Consolas, "Liberation Mono", monospace;
  --ci-fs-display: clamp(2.375rem, 1.85rem + 2.2vw, 3.5rem);  /* 38 to 56: home h1 */
  --ci-fs-page: clamp(2.125rem, 1.75rem + 1.6vw, 3rem);       /* 34 to 48: page h1 */
  --ci-fs-title: clamp(1.75rem, 1.55rem + 0.85vw, 2.25rem);   /* 28 to 36: h2 */
  --ci-fs-headline: 1.5rem;                                    /* 24: h3, panel titles, big figures */
  --ci-fs-card: 1.3125rem;                                     /* 21: card titles, h4 */
  --ci-fs-lede: 1.3125rem;                                     /* 21: lede */
  --ci-fs-body: 1.125rem;                                      /* 18: body, labels, buttons, inputs */
  --ci-fs-small: 1rem;                                         /* 16: meta, tags, dense tables. The floor */
  --ci-lh-display: 1.1;
  --ci-lh-title: 1.2;
  --ci-lh-snug: 1.35;
  --ci-lh-body: 1.6;
  --ci-track-display: -0.015em;
  --ci-track-title: -0.01em;
  --ci-track-body: 0.005em;
  --ci-weight-regular: 400;
  --ci-weight-medium: 500;
  --ci-weight-semibold: 600;
  --ci-weight-bold: 700;

  /* Space: 4px base */
  --ci-space-1: 4px;
  --ci-space-2: 8px;
  --ci-space-3: 12px;
  --ci-space-4: 16px;
  --ci-space-5: 20px;
  --ci-space-6: 24px;
  --ci-space-7: 32px;
  --ci-space-8: 40px;
  --ci-space-9: 48px;
  --ci-space-10: 64px;
  --ci-space-11: 80px;
  --ci-space-12: 96px;

  /* Shape: 4px corners and clear 2px boxes */
  --ci-radius: 4px;
  --ci-radius-btn: 4px;
  --ci-radius-card: 4px;
  --ci-radius-input: 4px;
  --ci-radius-round: 999px;
  --ci-border: 2px;
  --ci-border-thick: 4px;
  --ci-bar: 8px;

  /* Layout */
  --ci-content: 1152px;
  --ci-main: 760px;
  --ci-gutter: 20px;
  --ci-section: 48px;
  --ci-target: 48px;
  --ci-mast-h: 72px;

  /* Motion: short and plain */
  --ci-ease: cubic-bezier(0.2, 0, 0, 1);
  --ci-dur-fast: 120ms;
  --ci-dur: 180ms;
  --ci-dur-slow: 240ms;
}

@media (min-width: 900px) {
  :root {
    --ci-gutter: 32px;
    --ci-section: 72px;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ci-canvas: #0a1726;
    --ci-surface: #0f2034;
    --ci-paper: #12263c;
    --ci-well: #173049;
    --ci-ink: #f5f7fa;
    --ci-body: #e4e9ef;
    --ci-muted: #c3cdd8;
    --ci-line: #34506e;
    --ci-line-strong: #8296ad;
    --ci-control: #a9b8c9;
    --ci-mast: #050e19;
    --ci-mast-ink: #f5f7fa;
    --ci-mast-muted: #c3cdd8;
    --ci-mast-line: #2a4058;
    --ci-link: #a8cbff;
    --ci-link-hover: #f5f7fa;
    --ci-accent: #a8cbff;
    --ci-accent-soft: #1a3556;
    --ci-accent-ink: #0a1726;
    --ci-primary: #a8cbff;
    --ci-primary-hover: #c7ddff;
    --ci-primary-ink: #0a1726;
    --ci-focus: #f5c451;
    --ci-focus-halo: #f5c451;
    --ci-focus-ink: #0a1726;
    --ci-gold-soft: #3a2e0e;
    --ci-success: #8fd6a6;
    --ci-success-soft: #12321f;
    --ci-warning: #f2bc7a;
    --ci-warning-soft: #3a2412;
    --ci-warning-bar: #e8913f;
    --ci-danger: #ffa3a3;
    --ci-danger-soft: #3c1518;
    --ci-invert: #f5f7fa;
    --ci-invert-ink: #0a1726;
    --ci-invert-muted: #3b4a5e;
    --ci-scrim: rgba(2, 6, 12, 0.72);
    --ci-viz-1: #8fbcf0;
    --ci-viz-2: #f0a35c;
    --ci-viz-3: #3f86c9;
    --ci-viz-4: #f08a7a;
    --ci-viz-5: #5cc2ad;
    --ci-viz-6: #e0c060;
    --ci-seq-1: #1c3350;
    --ci-seq-2: #2c5282;
    --ci-seq-3: #4a7fbf;
    --ci-seq-4: #7fa9de;
    --ci-seq-5: #b9d3f5;
    --ci-div-1: #f08a7a;
    --ci-div-2: #9c4a3e;
    --ci-div-3: #2a3b50;
    --ci-div-4: #4a7fbf;
    --ci-div-5: #a8cbff;
    --ci-shadow-raise: 0 2px 0 rgba(0, 0, 0, 0.4);
    --ci-shadow-pop: 0 2px 4px rgba(0, 0, 0, 0.4), 0 16px 40px -12px rgba(0, 0, 0, 0.8);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ci-canvas: #0a1726;
  --ci-surface: #0f2034;
  --ci-paper: #12263c;
  --ci-well: #173049;
  --ci-ink: #f5f7fa;
  --ci-body: #e4e9ef;
  --ci-muted: #c3cdd8;
  --ci-line: #34506e;
  --ci-line-strong: #8296ad;
  --ci-control: #a9b8c9;
  --ci-mast: #050e19;
  --ci-mast-ink: #f5f7fa;
  --ci-mast-muted: #c3cdd8;
  --ci-mast-line: #2a4058;
  --ci-link: #a8cbff;
  --ci-link-hover: #f5f7fa;
  --ci-accent: #a8cbff;
  --ci-accent-soft: #1a3556;
  --ci-accent-ink: #0a1726;
  --ci-primary: #a8cbff;
  --ci-primary-hover: #c7ddff;
  --ci-primary-ink: #0a1726;
  --ci-focus: #f5c451;
  --ci-focus-halo: #f5c451;
  --ci-focus-ink: #0a1726;
  --ci-gold-soft: #3a2e0e;
  --ci-success: #8fd6a6;
  --ci-success-soft: #12321f;
  --ci-warning: #f2bc7a;
  --ci-warning-soft: #3a2412;
  --ci-warning-bar: #e8913f;
  --ci-danger: #ffa3a3;
  --ci-danger-soft: #3c1518;
  --ci-invert: #f5f7fa;
  --ci-invert-ink: #0a1726;
  --ci-invert-muted: #3b4a5e;
  --ci-scrim: rgba(2, 6, 12, 0.72);
  --ci-viz-1: #8fbcf0;
  --ci-viz-2: #f0a35c;
  --ci-viz-3: #3f86c9;
  --ci-viz-4: #f08a7a;
  --ci-viz-5: #5cc2ad;
  --ci-viz-6: #e0c060;
  --ci-seq-1: #1c3350;
  --ci-seq-2: #2c5282;
  --ci-seq-3: #4a7fbf;
  --ci-seq-4: #7fa9de;
  --ci-seq-5: #b9d3f5;
  --ci-div-1: #f08a7a;
  --ci-div-2: #9c4a3e;
  --ci-div-3: #2a3b50;
  --ci-div-4: #4a7fbf;
  --ci-div-5: #a8cbff;
  --ci-shadow-raise: 0 2px 0 rgba(0, 0, 0, 0.4);
  --ci-shadow-pop: 0 2px 4px rgba(0, 0, 0, 0.4), 0 16px 40px -12px rgba(0, 0, 0, 0.8);
}

/* Accent preset: teal. Buttons, links and selected marks turn a deep teal-green. Focus stays gold. */
:root[data-accent="teal"] {
  --ci-link: #0a524c;
  --ci-accent: #0a524c;
  --ci-accent-soft: #e3f1ef;
  --ci-accent-ink: #ffffff;
  --ci-primary: #0a524c;
  --ci-primary-hover: #063632;
  --ci-primary-ink: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root[data-accent="teal"]:not([data-theme="light"]) {
    --ci-link: #7fd3c7;
    --ci-accent: #7fd3c7;
    --ci-accent-soft: #123a36;
    --ci-accent-ink: #0a1726;
    --ci-primary: #7fd3c7;
    --ci-primary-hover: #a6e3da;
    --ci-primary-ink: #0a1726;
  }
}

:root[data-accent="teal"][data-theme="dark"] {
  --ci-link: #7fd3c7;
  --ci-accent: #7fd3c7;
  --ci-accent-soft: #123a36;
  --ci-accent-ink: #0a1726;
  --ci-primary: #7fd3c7;
  --ci-primary-hover: #a6e3da;
  --ci-primary-ink: #0a1726;
}

/* Accent preset: brick. A deep red-brown for buttons and links. Errors stay crimson and always carry
   an icon and the word "Error", so the two never rely on hue alone. */
:root[data-accent="brick"] {
  --ci-link: #7a3220;
  --ci-accent: #7a3220;
  --ci-accent-soft: #f7e8e3;
  --ci-accent-ink: #ffffff;
  --ci-primary: #7a3220;
  --ci-primary-hover: #55210f;
  --ci-primary-ink: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root[data-accent="brick"]:not([data-theme="light"]) {
    --ci-link: #f7bba7;
    --ci-accent: #f7bba7;
    --ci-accent-soft: #3a1d14;
    --ci-accent-ink: #0a1726;
    --ci-primary: #f7bba7;
    --ci-primary-hover: #fbd6c9;
    --ci-primary-ink: #0a1726;
  }
}

:root[data-accent="brick"][data-theme="dark"] {
  --ci-link: #f7bba7;
  --ci-accent: #f7bba7;
  --ci-accent-soft: #3a1d14;
  --ci-accent-ink: #0a1726;
  --ci-primary: #f7bba7;
  --ci-primary-hover: #fbd6c9;
  --ci-primary-ink: #0a1726;
}