/* src/client/index.css */
html {
  font-size: 18px;
}

:root, [data-bs-theme="light"] {
  --bs-primary: #21ba45;
  --bs-primary-rgb: 33, 186, 69;
  --bs-primary-text-emphasis: #0e5320;
  --bs-primary-bg-subtle: #d6f5dd;
  --bs-primary-border-subtle: #99dfa9;
  --bs-link-color: #178534;
  --bs-link-color-rgb: 23, 133, 52;
  --bs-link-hover-color: #105e25;
  --bs-link-hover-color-rgb: 16, 94, 37;
  --bs-body-bg: #f5f6f8;
  --bs-body-bg-rgb: 245, 246, 248;
  --bs-secondary-bg: #ebedf1;
  --bs-secondary-bg-rgb: 235, 237, 241;
  --bs-tertiary-bg: #dfe2e8;
  --bs-tertiary-bg-rgb: 223, 226, 232;
  --bs-border-color: #d2d6dd;
  --bs-border-color-translucent: #0000001f;
  --bs-body-color: #1c1d22;
  --bs-body-color-rgb: 28, 29, 34;
  --bs-emphasis-color: #0a0b0d;
  --bs-secondary-color: #1c1d22a6;
  --bs-secondary-color-rgb: 28, 29, 34;
  --bs-tertiary-color: #1c1d2273;
  --bs-tertiary-color-rgb: 28, 29, 34;
}

[data-bs-theme="dark"] {
  --bs-primary: #43d966;
  --bs-primary-rgb: 67, 217, 102;
  --bs-primary-text-emphasis: #8fe9a4;
  --bs-primary-bg-subtle: #0e2e16;
  --bs-primary-border-subtle: #205c2c;
  --bs-link-color: #5eda7d;
  --bs-link-color-rgb: 94, 218, 125;
  --bs-link-hover-color: #82e398;
  --bs-link-hover-color-rgb: 130, 227, 152;
  --bs-body-bg: #1c1f27;
  --bs-body-bg-rgb: 28, 31, 39;
  --bs-secondary-bg: #252934;
  --bs-secondary-bg-rgb: 37, 41, 52;
  --bs-tertiary-bg: #2f3441;
  --bs-tertiary-bg-rgb: 47, 52, 65;
  --bs-border-color: #363b48;
  --bs-border-color-translucent: #ffffff1a;
  --bs-body-color: #e8e9eb;
  --bs-body-color-rgb: 232, 233, 235;
  --bs-emphasis-color: #f8f9fa;
  --bs-secondary-color: #e8e9ebb3;
  --bs-secondary-color-rgb: 232, 233, 235;
  --bs-tertiary-color: #e8e9eb80;
  --bs-tertiary-color-rgb: 232, 233, 235;
}

:root {
  --bs-border-radius: .25rem;
  --bs-border-radius-sm: .15rem;
  --bs-border-radius-lg: .5rem;
  --bs-border-radius-xl: .75rem;
  --bs-body-font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --bs-font-monospace: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --buncss-light: initial;
  --buncss-dark: ;
  color-scheme: light;
}

[data-bs-theme="dark"] {
  --buncss-light: ;
  --buncss-dark: initial;
  color-scheme: dark;
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .modal-title, .accordion-header, .accordion-button {
  letter-spacing: -.015em;
  font-family: Bricolage Grotesque, Outfit, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
  font-weight: 600;
}

.table, .badge, small, code {
  font-variant-numeric: tabular-nums;
}

.badge.bg-primary, .badge.text-bg-primary {
  border: 1px solid var(--bs-primary-border-subtle);
  background-color: var(--bs-primary-bg-subtle) !important;
  color: var(--bs-primary-text-emphasis) !important;
}

.port-1 {
  background-color: #d639422e;
}

.port-2 {
  background-color: #2c6dde33;
}

.port-3 {
  background-color: #e0b02038;
}

.port-4 {
  background-color: #2c994733;
}

.badge.port-1 {
  color: #961e28;
  border: 1px solid #d6394266;
}

.badge.port-2 {
  color: #1e50b4;
  border: 1px solid #2c6dde66;
}

.badge.port-3 {
  color: #8c640a;
  border: 1px solid #e0b02080;
}

.badge.port-4 {
  color: #1e6e32;
  border: 1px solid #2c994766;
}

[data-bs-theme="dark"] .badge.port-1 {
  color: #f58c96;
}

[data-bs-theme="dark"] .badge.port-2 {
  color: #8cb4ff;
}

[data-bs-theme="dark"] .badge.port-3 {
  color: #f0d26e;
}

[data-bs-theme="dark"] .badge.port-4 {
  color: #78d291;
}

.card[role="button"] {
  transition: border-color .15s, box-shadow .15s, transform .15s, background-color .15s;
}

.card[role="button"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 .25rem .75rem #00000012;
}

[data-bs-theme="dark"] .card[role="button"]:hover {
  box-shadow: 0 .25rem .75rem #00000059;
}

.card[role="button"].is-selected {
  border-color: var(--bs-primary);
  box-shadow: inset 4px 0 0 0 var(--bs-primary);
}

.card[role="button"].is-selected:hover {
  box-shadow: inset 4px 0 0 0 var(--bs-primary), 0 .25rem .75rem #00000012;
}

[data-bs-theme="dark"] .card[role="button"].is-selected:hover {
  box-shadow: inset 4px 0 0 0 var(--bs-primary), 0 .25rem .75rem #00000059;
}