@font-face {
  font-family: "Inter Variable";
  src: url("/static/fonts/inter/InterVariable.woff2") format("woff2-variations");
  font-display: swap;
  font-style: normal;
  font-weight: 100 900;
}

@font-face {
  font-family: "Inter Variable";
  src: url("/static/fonts/inter/InterVariable-Italic.woff2") format("woff2-variations");
  font-display: swap;
  font-style: italic;
  font-weight: 100 900;
}

:root {
  --echo-brand-red: #d20900;
  --echo-brand-navy: #111633;
  --echo-brand-deep-blue: #001c38;
  --echo-brand-blue: #006c92;
  --echo-brand-cyan: #00bced;
  --ui-color-canvas: #d9dce3;
  --ui-color-canvas-alt: #d1d5dd;
  --ui-color-surface: #e9eaed;
  --ui-color-surface-raised: #f1f2f4;
  --ui-color-surface-muted: #dfe2e7;
  --ui-color-surface-sunken: #d5d9e0;
  --ui-color-text: #19203f;
  --ui-color-text-muted: #55627b;
  --ui-color-text-muted-strong: #3e4b62;
  --ui-color-border: rgba(17, 22, 51, .14);
  --ui-color-border-strong: rgba(17, 22, 51, .24);
  --ui-color-edge-highlight: rgba(255, 255, 255, .72);
  --ui-color-primary: var(--echo-brand-red);
  --ui-color-primary-hover: #b42318;
  --ui-color-primary-active: #921d14;
  --ui-color-primary-text: #fff;
  --ui-color-info: var(--echo-brand-blue);
  --ui-color-success: #067647;
  --ui-color-warning: #b54708;
  --ui-color-danger: #b91c1c;
  --ui-color-closed-bg: #d7d7d7;
  --ui-color-closed-border: rgba(17, 22, 51, .22);
  --ui-color-closed-text: #6d7893;
  --ui-primary-rgb: 210, 9, 0;
  --ui-font-sans: "Inter Variable", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ui-font-body: var(--ui-font-sans);
  --ui-font-heading: var(--ui-font-sans);
  --ui-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --ui-font-weight-regular: 400;
  --ui-font-weight-medium: 500;
  --ui-font-weight-semibold: 600;
  --ui-font-weight-bold: 700;
  --ui-font-size-caption: 11px;
  --ui-font-size-secondary: 12px;
  --ui-font-size-table: 13px;
  --ui-font-size-body: 14px;
  --ui-font-size-control: 14px;
  --ui-font-size-button: 14px;
  --ui-font-size-subsection: 16px;
  --ui-font-size-section: 19px;
  --ui-font-size-page: 23px;
  --ui-font-size-display: 28px;
  --ui-line-height-none: 1;
  --ui-line-height-tight: 1.2;
  --ui-line-height-snug: 1.3;
  --ui-line-height-normal: 1.45;
  --ui-line-height-relaxed: 1.6;
  --ui-letter-spacing-heading: -0.012em;
  --ui-letter-spacing-caps: .04em;
  --ui-prose-width: 72ch;
  --ui-legal-width: 68ch;
  --ui-space-1: 4px;
  --ui-space-2: 6px;
  --ui-space-3: 8px;
  --ui-space-4: 10px;
  --ui-space-5: 12px;
  --ui-space-6: 14px;
  --ui-space-7: 16px;
  --ui-space-8: 20px;
  --ui-space-9: 24px;
  --ui-radius-sm: 10px;
  --ui-radius: 16px;
  --ui-radius-lg: 20px;
  --ui-radius-control: 8px;
  --ui-shadow-control: 0 1px 1px rgba(8, 16, 49, .08), 0 2px 5px rgba(8, 16, 49, .07);
  --ui-shadow-surface: 0 1px 2px rgba(8, 16, 49, .10), 0 8px 22px rgba(8, 16, 49, .08);
  --ui-shadow-raised: 0 2px 5px rgba(8, 16, 49, .12), 0 16px 34px rgba(8, 16, 49, .12);
  --ui-shadow-overlay: 0 24px 64px rgba(8, 16, 49, .22), 0 6px 18px rgba(8, 16, 49, .13);
  --ui-shadow-inset: inset 0 1px 3px rgba(8, 16, 49, .12);
  --ui-shadow-header: 0 1px 0 var(--ui-color-edge-highlight), 0 6px 18px rgba(8, 16, 49, .08);
  --ui-shadow-primary: 0 3px 9px rgba(var(--ui-primary-rgb), .24);
  --ui-shadow: var(--ui-shadow-overlay);
  --ui-shadow-soft: var(--ui-shadow-surface);
  --ui-control-height: 40px;
  --ui-control-height-compact: 34px;
  --ui-control-padding: 9px 12px;
  --ui-control-padding-compact: 6px 10px;
  --ui-action-padding-inline: 14px;
  --ui-action-padding-inline-compact: 10px;
  --ui-action-group-gap: 8px;
  --ui-card-padding: 16px;
  --ui-page-gutter: 16px;
  --ui-table-padding-block: 10px;
  --ui-table-padding-inline: 12px;
  --ui-nav-mobile-gap: 2px;
  --ui-nav-mobile-panel-reserved-space: 137px;
  --ui-button-bg: var(--ui-color-primary);
  --ui-button-bg-hover: var(--ui-color-primary-hover);
  --ui-button-bg-active: var(--ui-color-primary-active);
  --ui-button-text: var(--ui-color-primary-text);
}

[data-theme="dark"] {
  --ui-color-canvas: #20232b;
  --ui-color-canvas-alt: #1a1d24;
  --ui-color-surface: #2b2f38;
  --ui-color-surface-raised: #353a45;
  --ui-color-surface-muted: #262a32;
  --ui-color-surface-sunken: #1c2027;
  --ui-color-text: #e8edf9;
  --ui-color-text-muted: #b8c5df;
  --ui-color-text-muted-strong: #dbe5f8;
  --ui-color-border: rgba(210, 221, 244, .13);
  --ui-color-border-strong: rgba(210, 221, 244, .23);
  --ui-color-edge-highlight: rgba(255, 255, 255, .07);
  --ui-color-closed-bg: #3a3a3a;
  --ui-color-closed-border: rgba(189, 202, 236, .26);
  --ui-color-closed-text: #9ca8c8;
  --ui-shadow-control: 0 1px 2px rgba(0, 0, 0, .28), 0 3px 7px rgba(0, 0, 0, .18);
  --ui-shadow-surface: 0 2px 4px rgba(0, 0, 0, .28), 0 10px 26px rgba(0, 0, 0, .24);
  --ui-shadow-raised: 0 4px 10px rgba(0, 0, 0, .34), 0 18px 42px rgba(0, 0, 0, .30);
  --ui-shadow-overlay: 0 28px 70px rgba(0, 0, 0, .52), 0 8px 22px rgba(0, 0, 0, .34);
  --ui-shadow-inset: inset 0 1px 4px rgba(0, 0, 0, .34);
  --ui-shadow-header: 0 1px 0 var(--ui-color-edge-highlight), 0 8px 22px rgba(0, 0, 0, .28);
  --ui-shadow-primary: 0 4px 12px rgba(var(--ui-primary-rgb), .32);
}

@media (max-width: 700px) {
  :root {
    --ui-font-size-caption: 12px;
    --ui-font-size-secondary: 13px;
    --ui-font-size-body: 15px;
    --ui-font-size-control: 16px;
    --ui-font-size-button: 16px;
    --ui-font-size-subsection: 17px;
    --ui-font-size-section: 20px;
    --ui-font-size-page: 24px;
    --ui-control-height: 44px;
    --ui-control-height-compact: 40px;
    --ui-page-gutter: 12px;
  }
}

@media (min-width: 1440px) {
  :root {
    --ui-page-gutter: 20px;
  }
}