:root {
  color-scheme: light;
  --bg-body: #f2f2f2;
  --bg-surface: #ffffff;
  --bg-surface-2: #f8fafc;
  --bg-surface-3: #f2f6fb;
  --surface-muted: #f8fafc;
  --surface-raised: #ffffff;
  --surface-accent: #edf4ff;
  --text-color: #1f2d3d;
  --text-muted: #667789;
  --text-subtle: #8a97a5;
  --border-color: #dbe2ea;
  --border-strong: #314150;
  --brand-color: #de3e80;
  --accent-color: #0d52bf;
  --accent-color-soft: #edf4ff;
  --chip-neutral-bg: #f8fafc;
  --chip-neutral-text: #425468;
  --chip-neutral-border: #dbe2ea;
  --chip-info-bg: #edf4ff;
  --chip-info-text: #2253a4;
  --chip-warning-bg: #f6ede0;
  --chip-warning-text: #7a5731;
  --chip-danger-bg: #fbf0f2;
  --chip-danger-text: #8c2f40;
  --chip-success-bg: #e8f5ee;
  --chip-success-text: #2f6845;
  --shadow-card: 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px rgba(0, 0, 0, 0.12);
  --shadow-card-hover: 0 3px 4px rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 8px rgba(0, 0, 0, 0.12);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-body: #17212b;
  --bg-surface: #1f2b38;
  --bg-surface-2: #243241;
  --bg-surface-3: #20303f;
  --surface-muted: #243241;
  --surface-raised: #1f2b38;
  --surface-accent: rgba(143, 193, 255, 0.12);
  --text-color: #e6edf5;
  --text-muted: #a8b4c3;
  --text-subtle: #93a9c4;
  --border-color: #314150;
  --border-strong: #465a6f;
  --accent-color: #8fc1ff;
  --accent-color-soft: rgba(143, 193, 255, 0.12);
  --chip-neutral-bg: #243241;
  --chip-neutral-text: #e6edf5;
  --chip-neutral-border: #314150;
  --chip-info-bg: rgba(143, 193, 255, 0.12);
  --chip-info-text: #b6d5ff;
  --chip-warning-bg: #6b5130;
  --chip-warning-text: #f0cf9d;
  --chip-danger-bg: #5a2d36;
  --chip-danger-text: #f4bcc5;
  --chip-success-bg: #244738;
  --chip-success-text: #a7f3d0;
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.26);
  --shadow-card-hover: 0 18px 40px rgba(0, 0, 0, 0.34);
}

.mley-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 1.75rem;
  padding: 0.22rem 0.62rem;
  border: 1px solid var(--chip-neutral-border);
  border-radius: 999px;
  background: var(--chip-neutral-bg);
  color: var(--chip-neutral-text);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
}

.mley-chip--neutral {
  border-color: var(--chip-neutral-border);
  background: var(--chip-neutral-bg);
  color: var(--chip-neutral-text);
}

.mley-chip--info {
  border-color: var(--chip-info-bg);
  background: var(--chip-info-bg);
  color: var(--chip-info-text);
}

.mley-chip--warning {
  border-color: var(--chip-warning-bg);
  background: var(--chip-warning-bg);
  color: var(--chip-warning-text);
}

.mley-chip--danger {
  border-color: var(--chip-danger-bg);
  background: var(--chip-danger-bg);
  color: var(--chip-danger-text);
}

.mley-chip--success {
  border-color: var(--chip-success-bg);
  background: var(--chip-success-bg);
  color: var(--chip-success-text);
}

.badge-light,
html body[data-page-kind] .badge-light,
.badge-secondary,
html body[data-page-kind] .badge-secondary,
.btn-light,
html body[data-page-kind] .btn-light,
.list-group-item,
html body[data-page-kind] .list-group-item,
.page-link,
html body[data-page-kind] .page-link {
  border-color: var(--chip-neutral-border);
  background: var(--chip-neutral-bg);
  color: var(--chip-neutral-text);
}

.badge-warning,
html body[data-page-kind] .badge-warning {
  background: var(--chip-warning-bg);
  color: var(--chip-warning-text);
}

.badge-danger,
html body[data-page-kind] .badge-danger,
.alert-danger,
html body[data-page-kind] .alert-danger {
  border-color: var(--chip-danger-bg);
  background: var(--chip-danger-bg);
  color: var(--chip-danger-text);
}

.alert-light,
html body[data-page-kind] .alert-light {
  background: var(--surface-muted);
  border-color: var(--chip-neutral-border);
  color: var(--text-muted);
}

.badge-light[href]:hover,
.badge-light[href]:focus,
.btn-light:hover,
.btn-light:focus,
.btn-light:active,
html body[data-page-kind] .badge-light[href]:hover,
html body[data-page-kind] .badge-light[href]:focus,
html body[data-page-kind] .btn-light:hover,
html body[data-page-kind] .btn-light:focus,
html body[data-page-kind] .btn-light:active {
  border-color: var(--border-strong);
  background: var(--surface-accent);
  color: var(--chip-neutral-text);
}