:root,
html.dark {
  --primary: #00d2ff;
  --primary-h: 191deg;
  --primary-s: 100%;
  --primary-l: 50%;
  --white: #080f1d;
  --grey-50: #050810;
  --grey-100: #0a1322;
  --grey-200: #17243a;
  --grey-300: #24344d;
  --grey-700: #9eb0ca;
  --grey-800: #d9e4f4;
  --grey-900: #f3f7fd;
  color-scheme: dark;
}

html.dark body {
  color: #dfe8f6;
  background: #050810;
  font-family: Inter, "Segoe UI", sans-serif;
}

html.dark .app-container,
html.dark .app-content {
  background: #050810;
}

html.dark .app-container-background {
  display: none;
}

html.dark .navbar {
  min-height: 4rem;
  border-bottom: 1px solid rgba(0, 210, 255, 0.12);
  background: rgba(5, 8, 16, 0.96);
  box-shadow: none;
}

html.dark .navbar .logo-link {
  display: flex;
  width: 10rem;
  height: 2.65rem;
  align-items: center;
}

html.dark .navbar .logo-link > div {
  width: 100%;
  height: 100%;
}

html.dark .navbar .logo-link .logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

html.dark .menu-container {
  border-right: 1px solid rgba(0, 210, 255, 0.11);
  background: #070c17;
  box-shadow: none;
}

html.dark .menu-list a,
html.dark .menu-list button {
  border-radius: 6px;
  color: #9eafc7;
}

html.dark .menu-list a:hover,
html.dark .menu-list button:hover {
  color: #e6eef9;
  background: rgba(84, 112, 151, 0.1);
}

html.dark .menu-list a.router-link-active {
  color: #effaff;
  background: rgba(0, 210, 255, 0.08);
  box-shadow: inset 3px 0 0 #00d2ff;
}

html.dark .menu-list a.router-link-active .icon,
html.dark .menu-list a:hover .icon {
  color: #00d2ff;
}

html.dark .menu-bottom-link {
  color: #60728d;
}

html.dark .app-content {
  padding-top: clamp(1.5rem, 4vw, 3rem);
}

html.dark h1,
html.dark h2,
html.dark h3,
html.dark .title {
  color: #edf4ff;
  font-family: Geist, Inter, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

html.dark h1 {
  font-weight: 700;
}

html.dark .box,
html.dark .card,
html.dark .modal-card,
html.dark .task-view,
html.dark .quick-actions,
html.dark .dropdown-content {
  border: 1px solid rgba(96, 129, 169, 0.16);
  border-radius: 8px;
  background: #09111f;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24);
}

html.dark .input,
html.dark .textarea,
html.dark .select select,
html.dark .add-task-textarea {
  border-color: rgba(96, 129, 169, 0.2);
  border-radius: 6px;
  color: #e0e9f7;
  background: #07101d;
  box-shadow: none;
}

html.dark .input:focus,
html.dark .textarea:focus,
html.dark .select select:focus,
html.dark .add-task-textarea:focus {
  border-color: rgba(0, 210, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(0, 210, 255, 0.08);
}

html.dark .button {
  min-height: 2.4rem;
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: none;
}

html.dark .button.is-primary {
  border-color: #00d2ff;
  color: #04111c;
  background: #00d2ff;
}

html.dark .button.is-primary:hover {
  border-color: #43ddff;
  background: #43ddff;
}

html.dark .task-input-wrapper {
  border-radius: 8px;
  background: transparent;
}

html.dark .add-task-button {
  min-width: 5rem;
}

html.dark .notification {
  border: 1px solid rgba(96, 129, 169, 0.2);
  border-radius: 8px;
  color: #dfe8f6;
  background: #0a1424;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

html.dark .notification.is-warning {
  border-color: rgba(255, 196, 88, 0.32);
  color: #ffe6ad;
  background: #1b160c;
}

html.dark .avatar {
  border: 1px solid rgba(0, 210, 255, 0.3);
}

html.dark .show-tasks .llama-cool {
  display: none;
}

html.dark .show-tasks:has(.llama-cool)::after {
  display: block;
  width: 8rem;
  height: 8rem;
  margin: 3rem auto 0;
  background: url("/_crimson/brand/crimson-icon.png?v=20260726") center / contain no-repeat;
  content: "";
  opacity: 0.35;
}

html.dark .add-to-home-screen {
  border: 1px solid rgba(0, 210, 255, 0.18);
  border-radius: 8px;
  color: #c7d4e7;
  background: #09111f;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.36);
}

html.dark .add-to-home-screen .add-icon {
  color: #00d2ff;
}

html.dark .add-to-home-screen .hide-button {
  color: #9eafc7;
}

html.dark ::selection {
  color: #03111b;
  background: #00d2ff;
}

@media (max-width: 768px) {
  html.dark .navbar {
    min-height: 3.6rem;
  }

  html.dark .navbar .logo-link {
    width: 8rem;
    height: 2.25rem;
  }

  html.dark .app-content {
    padding: 1rem 0.8rem 2rem;
  }

  html.dark .content {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.dark *,
  html.dark *::before,
  html.dark *::after {
    scroll-behavior: auto;
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
  }
}