:root {
  --cdl-black: #080808;
  --cdl-panel: #111111;
  --cdl-blue: #0c80b3;
  --cdl-blue-soft: rgba(12, 128, 179, 0.22);
  --cdl-line: rgba(255, 255, 255, 0.14);
  --cdl-soft: rgba(255, 255, 255, 0.68);
  --cdl-page: var(--cdl-black);
  --cdl-text: #f4f4f4;
  --cdl-header: rgba(8, 8, 8, 0.94);
  --cdl-input: rgba(255, 255, 255, 0.045);
}

html.dark {
  color-scheme: dark;
  --background: 0 0% 3% !important;
  --foreground: 0 0% 96% !important;
  --card: 0 0% 6% !important;
  --card-foreground: 0 0% 96% !important;
  --popover: 0 0% 6% !important;
  --popover-foreground: 0 0% 96% !important;
  --primary: 198 87% 37% !important;
  --primary-foreground: 0 0% 100% !important;
  --secondary: 0 0% 11% !important;
  --secondary-foreground: 0 0% 96% !important;
  --muted: 0 0% 12% !important;
  --muted-foreground: 0 0% 66% !important;
  --accent: 198 54% 16% !important;
  --accent-foreground: 0 0% 98% !important;
  --border: 0 0% 20% !important;
  --input: 0 0% 18% !important;
  --ring: 198 87% 37% !important;
  --cdl-page: var(--cdl-black);
  --cdl-panel: #111111;
  --cdl-line: rgba(255, 255, 255, 0.14);
  --cdl-soft: rgba(255, 255, 255, 0.68);
  --cdl-text: #f4f4f4;
  --cdl-header: rgba(8, 8, 8, 0.94);
  --cdl-input: rgba(255, 255, 255, 0.045);
}

html.light {
  color-scheme: light;
  --background: 210 25% 98% !important;
  --foreground: 215 28% 18% !important;
  --card: 0 0% 100% !important;
  --card-foreground: 215 28% 18% !important;
  --popover: 0 0% 100% !important;
  --popover-foreground: 215 28% 18% !important;
  --primary: 198 87% 37% !important;
  --primary-foreground: 0 0% 100% !important;
  --secondary: 210 25% 94% !important;
  --secondary-foreground: 215 28% 18% !important;
  --muted: 210 25% 94% !important;
  --muted-foreground: 215 15% 40% !important;
  --accent: 198 45% 92% !important;
  --accent-foreground: 198 60% 22% !important;
  --border: 210 18% 84% !important;
  --input: 210 18% 84% !important;
  --ring: 198 87% 37% !important;
  --cdl-page: #f5f8fa;
  --cdl-panel: #ffffff;
  --cdl-line: rgba(25, 64, 82, 0.18);
  --cdl-soft: rgba(28, 51, 64, 0.72);
  --cdl-text: #17313f;
  --cdl-header: rgba(255, 255, 255, 0.94);
  --cdl-input: rgba(255, 255, 255, 0.86);
}

html,
body,
#root {
  min-height: 100%;
  background: var(--cdl-page) !important;
  color: var(--cdl-text);
}

body {
  letter-spacing: 0.005em;
}

header {
  border-bottom: 1px solid var(--cdl-blue-soft) !important;
  background: var(--cdl-header) !important;
  backdrop-filter: blur(14px);
}

main {
  background:
    radial-gradient(circle at 50% -15%, var(--cdl-blue-soft), transparent 34rem),
    var(--cdl-page) !important;
  color: var(--cdl-text);
}

button,
textarea,
input {
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

textarea,
input {
  border-color: var(--cdl-line) !important;
  background: var(--cdl-input) !important;
  color: var(--cdl-text) !important;
}

#message-composer {
  border-radius: 2rem !important;
}

#message-composer #chat-input {
  border-radius: 0.75rem !important;
  padding: 0.625rem 0.875rem !important;
}

#message-composer #chat-submit {
  margin-top: 0.5rem !important;
}

textarea:focus,
input:focus {
  border-color: var(--cdl-blue) !important;
  box-shadow: 0 0 0 3px var(--cdl-blue-soft) !important;
}

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

.prose,
.markdown-body {
  line-height: 1.65;
}

[data-radix-popper-content-wrapper] > div,
[data-cdl-person-dialog-panel],
[data-cdl-event-dialog-panel] {
  border: 1px solid var(--cdl-line) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22) !important;
}

[data-cdl-person-dialog],
[data-cdl-event-dialog] {
  position: fixed !important;
  inset: 0 !important;
  isolation: isolate;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--cdl-text);
}

[data-cdl-person-dialog="profile"],
[data-cdl-event-dialog="details"] {
  z-index: 1000 !important;
  background: hsl(var(--background)) !important;
}

[data-cdl-person-dialog="lightbox"] {
  z-index: 1001 !important;
  background: rgba(0, 0, 0, 0.72) !important;
}

[data-cdl-person-dialog-panel],
[data-cdl-event-dialog-panel] {
  background: hsl(var(--card)) !important;
  color: hsl(var(--card-foreground)) !important;
}

[data-cdl-person-dialog-panel="profile"] {
  width: min(100%, 40rem) !important;
  max-width: 40rem !important;
}

::selection {
  background: var(--cdl-blue);
  color: #ffffff;
}

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border: 2px solid var(--cdl-page);
  border-radius: 999px;
  background: rgba(12, 128, 179, 0.48);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(12, 128, 179, 0.72);
}