/* KOL.HK v3 base components. */
html {
  color-scheme: dark light;
  accent-color: var(--c-accent);
}

body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--accent-soft);
  color: var(--text);
}

a {
  color: var(--c-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: var(--sp-1);
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}

a:hover {
  color: var(--c-accent-2);
}

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms;
    animation-iteration-count: 1;
    scroll-behavior: auto;
    transition-duration: 1ms;
  }
}

.btn,
button,
[type="button"],
[type="submit"] {
  transition:
    background var(--t-fast),
    border-color var(--t-fast),
    box-shadow var(--t-fast),
    color var(--t-fast),
    transform var(--t-fast);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:disabled,
.btn.disabled,
button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
  transform: none;
}

.btn-primary,
.btn-dark,
#main-login,
.btn-success {
  color: var(--text-on-accent);
  background: var(--button-primary-bg);
  border-color: transparent;
  box-shadow: var(--shadow-accent);
  font-weight: 650;
}

.btn-primary:hover,
.btn-dark:hover,
#main-login:hover,
.btn-success:hover {
  color: var(--text-on-accent);
  background: var(--button-primary-hover);
  border-color: transparent;
  box-shadow: var(--shadow-accent);
}

.btn-primary:focus,
.btn-dark:focus,
#main-login:focus,
.btn-success:focus {
  box-shadow: var(--focus-ring), var(--shadow-accent);
}

.btn-ghost,
.btn-ghost-dark,
.btn-outline-primary,
.btn-outline-secondary {
  color: var(--text);
  background: transparent;
  border-color: var(--border-2);
}

.btn-ghost:hover,
.btn-ghost-dark:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
  color: var(--text);
  background: var(--accent-softer);
  border-color: var(--accent-strong);
}

.form-control,
.form-select,
.input-group-text,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  color: var(--text);
  background: var(--surface-bg);
  border-color: var(--border-2);
  border-radius: var(--r-md);
  box-shadow: none;
}

.form-control::placeholder {
  color: var(--muted-2);
}

.form-control:focus,
.form-select:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--single:focus {
  color: var(--text);
  background: var(--surface-raised);
  border-color: var(--accent-strong);
  box-shadow: var(--focus-ring);
}

.form-label {
  color: var(--text-2);
  font-weight: 650;
}

.form-text,
.text-muted,
small {
  color: var(--muted);
}

.card,
.dropdown-menu,
.popover,
.toast,
.list-group-item {
  color: var(--text);
  background: var(--panel-bg);
  border-color: var(--border);
  box-shadow: var(--shadow-1);
}

.dropdown-item {
  color: var(--text-2);
  border-radius: var(--r-sm);
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--text);
  background: var(--accent-softer);
}

.nav-pills .nav-link {
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  transition:
    background var(--t-fast),
    border-color var(--t-fast),
    color var(--t-fast),
    box-shadow var(--t-fast);
}

.nav-pills .nav-link:hover {
  color: var(--text);
  background: var(--accent-softer);
  border-color: var(--border);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: var(--text-on-accent);
  background: var(--button-primary-bg);
  border-color: var(--accent-strong);
  box-shadow: var(--shadow-accent);
}

.modal-content {
  color: var(--text);
  background: var(--panel-bg);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-3);
}

.modal-header,
.modal-footer {
  border-color: var(--border);
}

.modal-backdrop.show {
  background: var(--overlay-bg);
  opacity: 1;
}

.alert {
  border-radius: var(--r-lg);
  border-color: var(--border);
}

.table {
  color: var(--text);
}

.table > :not(caption) > * > * {
  border-color: var(--border);
}

.badge,
.pill,
.unread-indicator {
  transition: background var(--t-fast), opacity var(--t-fast), transform var(--t-fast);
}