:root,
.light {
  --foreground: 0 0% 9%;
  --card-foreground: 156 30% 7%;
  --popover-foreground: 156 30% 7%;

  --primary: 156 75% 28%;
  --primary-foreground: 0 0% 100%;
  --primary-dark: 156 75% 28%;
  --primary-dark-foreground: 0 0% 100%;

  --muted: 156 20% 96%;
  --muted-foreground: 156 8% 38%;

  --accent: 156 60% 92%;
  --border: 156 45% 85%;
  --input: 156 25% 88%;

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

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

  --chat-input-border: 156 15% 85%;

  --sidebar-accent: 156 55% 90%;
  --sidebar-chat-active-background: var(--sidebar-accent);

  --dropdown-menu-icon-background-hover: var(--primary) / 0.12;

  --logo-tile-background: 156 20% 40% / 0.08;

  --chart-primary: 156 75% 36%;
  --chart-primary-dark: 156 75% 22%;
  --chart-destructive: 355 86% 57%;
  --chart-muted: 156 8% 54%;
  --chart-accent: 156 50% 52%;
  --chart-warning: 40 95% 45%;
  --chart-info: 215 70% 50%;

  --sidebar-icon-fill-1: hsl(156, 75%, 48%);
  --sidebar-icon-fill-2: hsl(156, 55%, 80%);
  --sidebar-icon-fill-3: hsl(156, 75%, 36%);
  --sidebar-icon-fill-4: hsl(156, 76%, 22%);
  --sidebar-icon-fill-1-hover: hsl(156, 75%, 40%);
  --sidebar-icon-fill-2-hover: hsl(156, 50%, 72%);
  --sidebar-icon-fill-3-hover: hsl(156, 75%, 30%);
  --sidebar-icon-fill-4-hover: hsl(156, 76%, 18%);

  --capability-icon-fill-1: hsl(156, 55%, 80%);
  --capability-icon-fill-2: hsl(156, 75%, 48%);
  --capability-icon-fill-3: hsl(156, 75%, 36%);
  --capability-icon-fill-4: hsl(156, 75%, 42%);
  --capability-icon-fill-5: hsl(156, 55%, 80%);

  --chat-history-icon-fill-1: hsl(156, 55%, 80%);
  --chat-history-icon-fill-2: hsl(156, 75%, 42%);

  --user-icon-fill-1: hsl(156, 60%, 85%);
  --user-icon-fill-2: hsl(156, 60%, 55%);
  --user-icon-fill-3: hsl(0, 0%, 100%);

  --spinning-loader-fill-1: hsl(156, 76%, 22%);
  --spinning-loader-fill-2: hsl(156, 60%, 90%);
  --spinning-loader-fill-3: hsl(156, 75%, 48%);
}

.dark {
  --background: 158 22% 9%;
  --background-secondary: 158 26% 7%;

  --foreground: 150 14% 95%;
  --foreground-secondary: 155 10% 74%;

  --card: 158 18% 13%;
  --card-foreground: var(--foreground);

  --popover: 158 15% 18%;
  --popover-foreground: var(--foreground);
  --popover-input-background: var(--card);
  --popover-title: var(--foreground);

  --primary: 156 75% 48%;
  --primary-foreground: 156 73% 6%;

  --primary-dark: 156 75% 30%;
  --primary-dark-foreground: 0 0% 100%;

  --accent: 158 20% 22%;
  --accent-foreground: var(--foreground);

  --muted: 158 14% 20%;
  --muted-foreground: var(--foreground-secondary);

  --border: 158 10% 28%;

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

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

  --sidebar-accent: 156 45% 30% / 0.5;
  --sidebar-accent-foreground: 156 70% 85%;

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

  --dropzone-border: var(--border);
  --dropzone-active-overlay: 156 75% 48% / 0.1;

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

  --list-item-background: var(--card);
  --list-item-border: var(--border);

  --stepper-steps-background: 158 16% 16%;
  --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: 158 25% 8%;
  --search-input-background: var(--card);
  --scroll-area-thumb-background: 158 8% 40%;
  --skeleton-background: var(--card);

  --link: 156 70% 65%;
  --highlighted: 156 80% 70%;

  --chart-primary: var(--primary);
  --chart-primary-dark: 156 60% 38%;
  --chart-destructive: 355 85% 66%;
  --chart-muted: 158 8% 55%;
  --chart-accent: 156 40% 72%;
  --chart-warning: 43 95% 60%;
  --chart-info: 210 80% 68%;

  --sidebar-icon-fill-1: hsl(156, 75%, 55%);
  --sidebar-icon-fill-2: hsla(156, 60%, 80%, 0.5);
  --sidebar-icon-fill-3: hsl(156, 75%, 45%);
  --sidebar-icon-fill-4: hsl(156, 75%, 36%);
  --sidebar-icon-fill-1-hover: hsl(156, 80%, 64%);
  --sidebar-icon-fill-2-hover: hsla(156, 65%, 86%, 0.68);
  --sidebar-icon-fill-3-hover: hsl(156, 78%, 52%);
  --sidebar-icon-fill-4-hover: hsl(156, 75%, 42%);

  --chat-history-icon-fill-1: hsla(156, 60%, 80%, 0.55);
  --chat-history-icon-fill-2: hsl(156, 75%, 45%);

  --capability-icon-fill-1: hsl(156, 45%, 92%);
  --capability-icon-fill-2: hsl(156, 75%, 48%);
  --capability-icon-fill-3: hsl(156, 75%, 36%);
  --capability-icon-fill-4: hsl(156, 70%, 45%);
  --capability-icon-fill-5: hsl(156, 45%, 92%);
  --capability-icon-fill-disabled: hsl(158, 8%, 60%);

  --user-icon-fill-1: hsl(156, 50%, 80%);
  --user-icon-fill-2: hsl(156, 45%, 55%);
  --user-icon-fill-3: hsl(0, 0%, 100%);

  --spinning-loader-fill-1: hsl(156, 75%, 48%);
  --spinning-loader-fill-2: hsl(156, 40%, 90%);
  --spinning-loader-fill-3: hsl(156, 65%, 68%);
}