:root,
.light {
  --logo-height-auth: 3.5rem;
  --logo-height-chat: 3.75rem;
  --logo-height-assistant-preview: 3.25rem;

  --background-secondary: 0 0% 100%;

  --foreground: 201 60% 10%;
  --foreground-secondary: 201 18% 36%;

  --primary: 201 62% 32%;
  --primary-foreground: 0 0% 100%;

  --primary-dark: 201 62% 32%;
  --primary-dark-foreground: 0 0% 100%;

  --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;

  --muted: 200 30% 96%;
  --muted-foreground: 200 14% 40%;

  --accent: 200 45% 94%;
  --accent-foreground: var(--foreground);

  --border: 200 30% 88%;
  --input: 200 25% 90%;

  --link: 200 100% 31%;
  --highlighted: var(--primary-dark);

  --checkbox-background: var(--primary);

  --chat-input-border: 240 6% 87%;

  --sidebar-background: 200 40% 95.5%;
  --sidebar-accent: 200 55% 88% / 0.85;
  --sidebar-accent-foreground: var(--foreground);
  --sidebar-chat-active-background: var(--sidebar-accent);

  --dropdown-menu-icon-background: var(--primary) / 0;
  --dropdown-menu-icon-background-hover: 200 55% 80% / 0.4;

  --dropzone-border: var(--border);

  --empty-section-border: var(--border);

  --logo-tile-background: 200 20% 50% / 0.08;

  --chart-primary: var(--primary);
  --chart-primary-dark: var(--primary-dark);
  --chart-accent: 199 100% 36%;
  --chart-muted: 201 14% 62%;
  --chart-warning: 38 95% 46%;
  --chart-info: 199 95% 38%;

  --sidebar-icon-fill-1: hsl(199, 80%, 60%);
  --sidebar-icon-fill-2: hsl(199, 70%, 82%);
  --sidebar-icon-fill-3: hsl(200, 80%, 54%);
  --sidebar-icon-fill-4: hsl(201, 90%, 40%);
  --sidebar-icon-fill-1-hover: hsl(199, 70%, 46%);
  --sidebar-icon-fill-2-hover: hsl(199, 60%, 72%);
  --sidebar-icon-fill-3-hover: hsl(200, 70%, 44%);
  --sidebar-icon-fill-4-hover: hsl(201, 80%, 34%);

  --capability-icon-fill-1: hsl(199, 70%, 82%);
  --capability-icon-fill-2: hsl(199, 80%, 60%);
  --capability-icon-fill-3: hsl(200, 80%, 54%);
  --capability-icon-fill-4: hsl(201, 80%, 46%);
  --capability-icon-fill-5: hsl(199, 70%, 82%);
  --capability-icon-fill-disabled: hsl(0, 0%, 62%);

  --chat-history-icon-fill-1: hsl(199, 70%, 82%);
  --chat-history-icon-fill-2: hsl(199, 80%, 60%);

  --user-icon-fill-1: hsl(199, 80%, 86%);
  --user-icon-fill-2: hsl(199, 75%, 62%);
  --user-icon-fill-3: hsl(0, 0%, 100%);

  --spinning-loader-fill-1: hsl(201, 90%, 40%);
  --spinning-loader-fill-2: hsl(199, 85%, 91%);
  --spinning-loader-fill-3: hsl(199, 75%, 70%);
}

.dark {
  --background: 201 70% 7.5%;
  --background-secondary: var(--background);

  --foreground: 200 20% 94%;
  --foreground-secondary: 201 20% 72%;

  --card: 201 52% 12.5%;
  --card-foreground: 200 20% 94%;

  --popover: 201 46% 16.5%;
  --popover-foreground: 200 20% 94%;
  --popover-input-background: 201 52% 12.5%;
  --popover-title: 200 20% 88%;

  --primary: 201 56% 40%;
  --primary-foreground: 0 0% 100%;

  --primary-dark: 201 56% 40%;
  --primary-dark-foreground: 0 0% 100%;

  --accent: 201 40% 20%;
  --accent-foreground: var(--foreground);

  --muted: 201 30% 20%;
  --muted-foreground: 201 20% 72%;

  --border: 201 30% 21%;

  --input: 201 30% 21%;
  --input-background: 201 52% 12.5%;

  --chat-input-background: var(--card);
  --chat-input-border: 201 30% 21%;

  --sidebar-background: 201 60% 11.5%;
  --sidebar-accent: 201 50% 30% / 0.5;
  --sidebar-accent-foreground: 200 60% 94%;
  --sidebar-chat-active-background: var(--sidebar-accent);

  --dropdown-menu-icon-background: var(--primary) / 0;
  --dropdown-menu-icon-background-hover: 201 36% 24%;

  --dropzone-background: var(--primary) / 0;
  --dropzone-border: 201 30% 21%;
  --dropzone-active-overlay: 199 88% 62% / 0.1;

  --empty-section-background: 201 52% 12.5%;
  --empty-section-foreground: var(--foreground);
  --empty-section-border: 201 30% 21%;

  --list-item-background: 201 52% 12.5%;
  --list-item-foreground: var(--foreground);
  --list-item-border: 201 30% 21%;
  --list-item-icon-background: var(--primary) / 0;

  --tabs-accent: var(--sidebar-accent);

  --stepper-steps-background: 201 48% 15%;

  --plan-card-accent: 201 40% 18%;

  --attachment-preview-background: 201 40% 18%;

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

  --layout-gap-background: var(--background);

  --search-input-background: 201 52% 12.5%;

  --scroll-area-thumb-background: 201 18% 38%;

  --skeleton-background: 201 52% 12.5%;

  --icon-background: var(--primary) / 0;

  --link: 199 90% 70%;

  --highlighted: 199 80% 76%;

  --checkbox-background: var(--primary);

  --chart-primary: 199 88% 62%;
  --chart-primary-dark: 201 60% 55%;
  --chart-accent: 184 70% 55%;
  --chart-muted: 201 12% 48%;
  --chart-warning: 40 95% 60%;
  --chart-info: 199 85% 62%;

  --sidebar-icon-fill-1: hsl(200, 65%, 66%);
  --sidebar-icon-fill-2: hsl(199, 70%, 80%);
  --sidebar-icon-fill-3: hsl(201, 80%, 46%);
  --sidebar-icon-fill-4: hsl(201, 80%, 46%);
  --sidebar-icon-fill-1-hover: hsl(199, 85%, 72%);
  --sidebar-icon-fill-2-hover: hsl(199, 70%, 85%);
  --sidebar-icon-fill-3-hover: hsl(201, 80%, 46%);
  --sidebar-icon-fill-4-hover: hsl(200, 80%, 54%);

  --capability-icon-fill-1: hsla(199, 85%, 66%, 0.45);
  --capability-icon-fill-2: hsla(199, 85%, 66%, 0.75);
  --capability-icon-fill-3: hsl(199, 85%, 66%);
  --capability-icon-fill-4: hsl(201, 75%, 52%);
  --capability-icon-fill-5: hsla(199, 85%, 66%, 0.45);
  --capability-icon-fill-disabled: hsl(201, 8%, 58%);

  --chat-history-icon-fill-1: hsla(199, 85%, 66%, 0.45);
  --chat-history-icon-fill-2: hsl(199, 85%, 66%);

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

  --spinning-loader-fill-1: hsl(199, 85%, 66%);
  --spinning-loader-fill-2: hsl(199, 80%, 90%);
  --spinning-loader-fill-3: hsla(199, 85%, 66%, 0.4);
}