:root,
.light {
  --logo-height-auth: 4rem;
  --logo-height-chat: 5rem;
  --logo-height-assistant-preview: 4rem;

  --primary: 199 95% 25%;
  --primary-dark: 199 51% 32%;
  --accent: 199 35% 96%;
  --border: 199 50% 88%;
  --sidebar-accent: 199 35% 94%;

  --chat-user-message-background: 199 85% 32%;

  --chart-primary: 199 48% 31%;
  --chart-primary-dark: 199 48% 28%;

  --sidebar-icon-fill-1: hsl(199, 85%, 45%);
  --sidebar-icon-fill-2: hsla(199, 85%, 45%, 0.4);
  --sidebar-icon-fill-3: hsl(199, 95%, 25%);
  --sidebar-icon-fill-4: hsl(199, 51%, 32%);
  --sidebar-icon-fill-1-hover: hsl(199, 95%, 25%);
  --sidebar-icon-fill-2-hover: hsla(199, 95%, 25%, 0.4);
  --sidebar-icon-fill-3-hover: hsl(199, 95%, 22%);
  --sidebar-icon-fill-4-hover: hsl(199, 51%, 28%);

  --chat-history-icon-fill-1: hsla(199, 70%, 71%, 0.4);
  --chat-history-icon-fill-2: hsl(199, 70%, 71%);

  --user-icon-fill-1: hsl(199, 70%, 85%);
  --user-icon-fill-2: hsl(199, 70%, 71%);
  --user-icon-fill-3: hsl(0, 0%, 100%);

  --spinning-loader-fill-1: hsl(199, 95%, 25%);
  --spinning-loader-fill-2: hsl(199, 70%, 71%);
  --spinning-loader-fill-3: hsla(199, 70%, 71%, 0.4);
}

.dark {
  --background: 204 34% 11%;
  --background-secondary: 206 40% 8%;

  --foreground: 210 18% 95%;
  --foreground-secondary: 206 16% 76%;

  --card: 204 28% 15%;
  --card-foreground: var(--foreground);

  --popover: 204 24% 20%;
  --popover-foreground: var(--foreground);
  --popover-input-background: var(--card);
  --popover-title: var(--foreground);

  --primary: 199 78% 72%;
  --primary-foreground: 204 35% 12%;

  --primary-dark: 199 76% 58%;
  --primary-dark-foreground: 204 35% 12%;

  --accent: 202 24% 28%;
  --accent-foreground: var(--foreground);

  --muted: 204 18% 24%;
  --muted-foreground: var(--foreground-secondary);

  --border: 204 13% 34%;

  --input: var(--border);
  --input-background: var(--card);

  --chat-input-background: var(--card);
  --chat-input-border: var(--border);

  --sidebar-accent: var(--popover);
  --sidebar-accent-foreground: 199 72% 84%;

  --dropdown-menu-icon-background: var(--card);
  --dropdown-menu-icon-background-hover: var(--accent);

  --dropzone-background: var(--card);
  --dropzone-border: var(--border);
  --dropzone-active-overlay: 199 78% 72% / 0.1;

  --empty-section-background: var(--card);
  --empty-section-foreground: var(--primary);
  --empty-section-border: var(--border);

  --list-item-background: var(--card);
  --list-item-foreground: var(--primary);
  --list-item-border: var(--border);
  --list-item-icon-background: 199 78% 72% / 0.1;

  --tabs-accent: var(--sidebar-accent);
  --stepper-steps-background: 204 22% 22%;
  --plan-card-accent: var(--popover);
  --attachment-preview-background: var(--popover);

  --chat-user-message-background: var(--primary-dark);
  --chat-user-message-foreground: var(--primary-dark-foreground);
  --chat-user-message-file-type-foreground: var(--primary-dark-foreground) / 0.8;

  --layout-gap-background: 206 42% 9%;
  --search-input-background: var(--card);
  --scroll-area-thumb-background: 203 13% 54%;
  --skeleton-background: var(--card);
  --icon-background: var(--card);

  --link: 199 82% 76%;
  --highlighted: 199 88% 82%;

  --chart-primary: var(--primary);
  --chart-primary-dark: var(--primary-dark);

  --sidebar-icon-fill-1: hsl(199, 90%, 72%);
  --sidebar-icon-fill-2: hsla(199, 78%, 82%, 0.5);
  --sidebar-icon-fill-3: hsl(199, 80%, 62%);
  --sidebar-icon-fill-4: hsl(199, 76%, 54%);
  --sidebar-icon-fill-1-hover: hsl(199, 94%, 80%);
  --sidebar-icon-fill-2-hover: hsla(199, 84%, 88%, 0.68);
  --sidebar-icon-fill-3-hover: hsl(199, 84%, 68%);
  --sidebar-icon-fill-4-hover: hsl(199, 80%, 60%);

  --chat-history-icon-fill-1: hsla(199, 78%, 82%, 0.55);
  --chat-history-icon-fill-2: hsl(199, 82%, 56%);

  --capability-icon-fill-1: hsl(199, 46%, 93%);
  --capability-icon-fill-2: hsl(199, 82%, 56%);
  --capability-icon-fill-3: hsl(199, 76%, 46%);
  --capability-icon-fill-4: hsl(199, 72%, 56%);
  --capability-icon-fill-5: hsl(199, 46%, 93%);
  --capability-icon-fill-disabled: hsl(204, 10%, 60%);

  --user-icon-fill-1: hsl(199, 60%, 82%);
  --user-icon-fill-2: hsl(199, 50%, 60%);
  --user-icon-fill-3: hsl(0, 0%, 100%);

  --spinning-loader-fill-1: hsl(199, 76%, 46%);
  --spinning-loader-fill-2: hsl(199, 42%, 92%);
  --spinning-loader-fill-3: hsl(199, 64%, 70%);
}