@font-face {
  font-family: 'Gotham Pro';
  src: url('/static/fonts/gothampro_light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham Pro';
  src: url('/static/fonts/gothampro.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham Pro';
  src: url('/static/fonts/gothampro_medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham Pro';
  src: url('/static/fonts/gothampro_bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham Pro';
  src: url('/static/fonts/gothampro_black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-ui: 'Gotham Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-data: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  --t-11: 0.6875rem;
  --t-12: 0.75rem;
  --t-13: 0.8125rem;
  --t-14: 0.875rem;
  --t-16: 1rem;
  --t-20: 1.25rem;
  --t-26: 1.625rem;
  --t-34: 2.125rem;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;

  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;

  --row-h: 56px;
  --head-h: 56px;
  --shell-w: 1680px;

  --ease: cubic-bezier(0.2, 0, 0, 1);
}

:root,
[data-theme='night'] {
  color-scheme: dark;

  --canvas: #0e141b;
  --surface: #161e27;
  --raised: #1e2833;
  --sunken: #101820;
  --line: #29343f;
  --line-soft: #202b36;

  --ink: #e6edf5;
  --muted: #93a2b4;
  --faint: #64748b;

  --accent: #22d3eeff;
  --accent-ink: #08222a;
  --accent-soft: #0d3540;

  --live: #34d399;
  --live-soft: #10352c;
  --attn: #f5a524;
  --attn-soft: #3a2b0e;
  --fault: #f87171;
  --fault-soft: #3a1d1f;
  --fw: #a78bfa;
  --fw-soft: #2a2445;

  --strip-live: #2f9d78;
  --strip-part: #b7801e;
  --strip-down: #b04a4a;
  --strip-void: #232e39;

  --ser-1: #f472b6;
  --ser-2: #a3e635;
  --ser-3: #60a5fa;
  --ser-4: #fb923c;
  --ser-5: #2dd4bf;
  --ser-6: #fde047;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
  --focus: 0 0 0 2px var(--canvas), 0 0 0 4px var(--accent);
}

[data-theme='day'] {
  color-scheme: light;

  --canvas: #eef1f5;
  --surface: #ffffff;
  --raised: #f6f9fb;
  --sunken: #e8edf2;
  --line: #d8e0e9;
  --line-soft: #e6ecf2;

  --ink: #0d1720;
  --muted: #55657a;
  --faint: #8496a9;

  --accent: #0e7490;
  --accent-ink: #ffffff;
  --accent-soft: #ddf3f8;

  --live: #0f7d53;
  --live-soft: #dff3e9;
  --attn: #a45a06;
  --attn-soft: #fdeed6;
  --fault: #c23b3b;
  --fault-soft: #fbe3e3;
  --fw: #6d48d7;
  --fw-soft: #ece6fb;

  --strip-live: #4cae86;
  --strip-part: #e0a534;
  --strip-down: #d9645f;
  --strip-void: #dfe6ed;

  --ser-1: #be185d;
  --ser-2: #4d7c0f;
  --ser-3: #1d4ed8;
  --ser-4: #c2410c;
  --ser-5: #0f766e;
  --ser-6: #a16207;

  --shadow-1: 0 1px 2px rgba(15, 30, 50, 0.08);
  --shadow-2: 0 10px 28px -12px rgba(15, 30, 50, 0.28);
  --focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
}