@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/trellis-brand/geist-sans.woff2') format('woff2');
}

:root,
.light {
  color-scheme: light;
  --trellis-accent: #007a68;
  --trellis-accent-hover: #008e7a;
  --trellis-accent-pressed: #005a4d;
  --trellis-accent-soft: rgba(0, 122, 104, 0.08);
  --trellis-accent-tint: rgba(0, 122, 104, 0.02);
  --trellis-canvas: #fafafa;
  --trellis-plane: oklch(99.2% 0 0);
  --trellis-surface-1: #ffffff;
  --trellis-surface-2: #f5f5f5;
  --trellis-surface-3: #ececec;
  --trellis-surface-4: #e5e5e5;
  --trellis-hairline: rgba(10, 10, 10, 0.08);
  --trellis-hairline-faint: rgba(10, 10, 10, 0.04);
  --trellis-hairline-strong: rgba(10, 10, 10, 0.14);
  --trellis-ink: #171717;
  --trellis-ink-muted: #404040;
  --trellis-ink-subtle: #737373;
  --trellis-ink-tertiary: #a3a3a3;
  --trellis-ink-inverted: #ffffff;
  --trellis-success: #007a68;
  --trellis-success-soft: #e6f7f2;
  --trellis-warning: #b45309;
  --trellis-warning-soft: #fff8e1;
  --trellis-attention: #b93776;
  --trellis-attention-soft: #fce9f1;
  --trellis-danger: #c62828;
  --trellis-danger-soft: #ffebee;
  --trellis-info: #1565c0;
  --trellis-info-soft: #e3f2fd;
  --trellis-chart-1: #009a7b;
  --trellis-chart-2: #3b6fd4;
  --trellis-chart-3: #d97706;
  --trellis-chart-4: #c2417f;
  --trellis-chart-5: #7c5cd6;
  --trellis-chart-grid: rgba(10, 10, 10, 0.06);
  --trellis-radius-sm: 6px;
  --trellis-radius-md: 8px;
  --trellis-radius-lg: 10px;
  --trellis-radius-xl: 12px;

  --t-font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  --t-font-weight-regular: 400 !important;
  --t-font-weight-medium: 500 !important;
  --t-font-weight-semi-bold: 500 !important;
  --t-font-size-xs: 12px !important;
  --t-font-size-sm: 13px !important;
  --t-font-size-md: 14px !important;
  --t-font-size-lg: 16px !important;
  --t-font-size-xl: 18px !important;
  --t-font-size-xxl: 22px !important;
  --t-accent-primary: var(--trellis-accent) !important;
  --t-accent-secondary: #d9f3ed !important;
  --t-accent-tertiary: #e8f8f4 !important;
  --t-accent-quaternary: #f2fbf9 !important;
  --t-accent-accent3570: #319985 !important;
  --t-accent-accent4060: #26917d !important;
  --t-accent-accent1: #f5fcfa !important;
  --t-accent-accent2: #e8f8f4 !important;
  --t-accent-accent3: #d9f3ed !important;
  --t-accent-accent4: #c4ebe2 !important;
  --t-accent-accent5: #a7dfd3 !important;
  --t-accent-accent6: #82cfbf !important;
  --t-accent-accent7: #54b9a5 !important;
  --t-accent-accent8: #269f89 !important;
  --t-accent-accent9: #007a68 !important;
  --t-accent-accent10: #006d5d !important;
  --t-accent-accent11: #005c4f !important;
  --t-accent-accent12: #193d36 !important;
  --t-background-primary: var(--trellis-surface-1) !important;
  --t-background-secondary: var(--trellis-surface-2) !important;
  --t-background-tertiary: var(--trellis-canvas) !important;
  --t-background-quaternary: var(--trellis-surface-3) !important;
  --t-background-inverted-primary: var(--trellis-ink) !important;
  --t-background-inverted-secondary: var(--trellis-ink-muted) !important;
  --t-background-primary-inverted: var(--trellis-ink) !important;
  --t-background-primary-inverted-hover: var(--trellis-ink-muted) !important;
  --t-background-danger: var(--trellis-danger-soft) !important;
  --t-background-transparent-primary: rgba(255, 255, 255, 0.5) !important;
  --t-background-transparent-secondary: rgba(255, 255, 255, 0.4) !important;
  --t-background-transparent-strong: var(--trellis-hairline-strong) !important;
  --t-background-transparent-medium: var(--trellis-hairline) !important;
  --t-background-transparent-light: var(--trellis-hairline-faint) !important;
  --t-background-transparent-lighter: rgba(10, 10, 10, 0.02) !important;
  --t-background-transparent-danger: var(--trellis-danger-soft) !important;
  --t-background-transparent-success: var(--trellis-success-soft) !important;
  --t-background-transparent-orange: var(--trellis-warning-soft) !important;
  --t-background-transparent-blue: var(--trellis-info-soft) !important;
  --t-border-color-strong: var(--trellis-hairline-strong) !important;
  --t-border-color-medium: var(--trellis-hairline) !important;
  --t-border-color-light: var(--trellis-hairline-faint) !important;
  --t-border-color-transparent-strong: var(--trellis-hairline) !important;
  --t-border-color-danger: var(--trellis-danger) !important;
  --t-border-color-inverted: var(--trellis-ink) !important;
  --t-border-color-secondary-inverted: var(--trellis-ink-muted) !important;
  --t-font-color-primary: var(--trellis-ink) !important;
  --t-font-color-secondary: var(--trellis-ink-muted) !important;
  --t-font-color-tertiary: var(--trellis-ink-subtle) !important;
  --t-font-color-light: var(--trellis-ink-tertiary) !important;
  --t-font-color-extra-light: var(--trellis-ink-tertiary) !important;
  --t-font-color-inverted: var(--trellis-ink-inverted) !important;
  --t-font-color-danger: var(--trellis-danger) !important;
  --t-snack-bar-success-color: var(--trellis-success) !important;
  --t-snack-bar-success-background-color: var(--trellis-success-soft) !important;
  --t-snack-bar-error-color: var(--trellis-danger) !important;
  --t-snack-bar-error-background-color: var(--trellis-danger-soft) !important;
  --t-snack-bar-warning-color: var(--trellis-warning) !important;
  --t-snack-bar-warning-background-color: var(--trellis-warning-soft) !important;
  --t-snack-bar-info-color: var(--trellis-info) !important;
  --t-snack-bar-info-background-color: var(--trellis-info-soft) !important;
  --t-border-radius-xs: 6px !important;
  --t-border-radius-sm: 6px !important;
  --t-border-radius-md: 8px !important;
  --t-border-radius-lg: 10px !important;
  --t-border-radius-xl: 12px !important;
  --t-border-radius-xxl: 12px !important;
  --t-box-shadow-color: var(--trellis-hairline-faint) !important;
  --t-box-shadow-light: 0 1px 4px rgba(10, 10, 10, 0.04) !important;
  --t-box-shadow-strong: 0 4px 16px rgba(10, 10, 10, 0.08), 0 1px 4px rgba(10, 10, 10, 0.04) !important;
}

.dark {
  color-scheme: dark;
  --trellis-accent: #1fa88e;
  --trellis-accent-hover: #1fa88e;
  --trellis-accent-pressed: #007a68;
  --trellis-accent-soft: rgba(31, 168, 142, 0.14);
  --trellis-accent-tint: rgba(31, 168, 142, 0.06);
  --trellis-canvas: #0a0a0a;
  --trellis-plane: #0d0d0d;
  --trellis-surface-1: #171717;
  --trellis-surface-2: #1f1f1f;
  --trellis-surface-3: #262626;
  --trellis-surface-4: #2b2b2b;
  --trellis-hairline: rgba(255, 255, 255, 0.08);
  --trellis-hairline-faint: rgba(255, 255, 255, 0.04);
  --trellis-hairline-strong: rgba(255, 255, 255, 0.14);
  --trellis-ink: #fafafa;
  --trellis-ink-muted: #d4d4d4;
  --trellis-ink-subtle: #a3a3a3;
  --trellis-ink-tertiary: #737373;
  --trellis-ink-inverted: #0a0a0a;
  --trellis-success: #1fa88e;
  --trellis-success-soft: rgba(31, 168, 142, 0.14);
  --trellis-warning: #d9822b;
  --trellis-warning-soft: rgba(217, 130, 43, 0.14);
  --trellis-attention: #e071a1;
  --trellis-attention-soft: rgba(224, 113, 161, 0.14);
  --trellis-danger: #e77272;
  --trellis-danger-soft: rgba(231, 114, 114, 0.14);
  --trellis-info: #7699e7;
  --trellis-info-soft: rgba(118, 153, 231, 0.14);
  --trellis-chart-1: #00a37f;
  --trellis-chart-2: #5b85e0;
  --trellis-chart-3: #c77f1f;
  --trellis-chart-4: #c95c8c;
  --trellis-chart-5: #8f6fe0;
  --trellis-chart-grid: rgba(255, 255, 255, 0.06);
  --t-accent-secondary: var(--trellis-accent-soft) !important;
  --t-accent-tertiary: var(--trellis-accent-soft) !important;
  --t-accent-quaternary: var(--trellis-accent-tint) !important;
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--t-font-family) !important;
  font-synthesis: none;
  letter-spacing: -0.01em;
}

.scalar-app {
  --scalar-font: var(--t-font-family) !important;
  font-family: var(--t-font-family);
  font-synthesis: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
[role='heading'] {
  font-weight: 500;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

b,
strong {
  font-weight: 500;
}

table,
[role='grid'],
time,
input[type='number'] {
  font-variant-numeric: tabular-nums;
}

code,
code *,
pre,
pre *,
kbd,
kbd *,
samp,
samp * {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  letter-spacing: 0;
}

::selection {
  background: rgba(0, 122, 104, 0.15);
}

.dark ::selection {
  background: rgba(31, 168, 142, 0.3);
}
