:root,
.light {
  --primary: 208 18% 28%;
  --primary-dark: 208 18% 24%;
  --primary-foreground: 210 9% 93%;

  --accent: 184 70% 91%;
  --border: 184 50% 84%;
  --sidebar-accent: 184 55% 90%;

  --success: 148 95% 28%;
  --success-foreground: 210 9% 93%;

  --warning: 45 100% 78%;
  --warning-foreground: 0 0% 0%;

  --destructive: 0 82% 62%;
  --destructive-foreground: 210 9% 93%;

  --info: 200 80% 38%;
  --info-foreground: 210 9% 93%;

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

  --chat-input-background: 184 55% 90%;
  --chat-input-border: var(--primary) / 0.3;

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

  --dropzone-border: var(--primary) / 0.3;

  --empty-section-border: var(--primary) / 0.3;

  --sidebar-icon-fill-1: hsl(208, 18%, 30%);
  --sidebar-icon-fill-2: hsla(208, 18%, 30%, 0.4);
  --sidebar-icon-fill-3: hsl(208, 18%, 27%);
  --sidebar-icon-fill-4: hsl(208, 18%, 24%);
  --sidebar-icon-fill-1-hover: hsl(208, 22%, 32%);
  --sidebar-icon-fill-2-hover: hsla(184, 80%, 30%, 0.4);
  --sidebar-icon-fill-3-hover: hsl(184, 85%, 26%);
  --sidebar-icon-fill-4-hover: hsl(184, 90%, 22%);

  --capability-icon-fill-1: hsla(184, 56%, 50%, 0.4);
  --capability-icon-fill-2: hsla(184, 56%, 50%, 0.7);
  --capability-icon-fill-3: hsl(184, 56%, 50%);
  --capability-icon-fill-4: hsl(184, 80%, 32%);
  --capability-icon-fill-5: hsla(184, 56%, 50%, 0.4);

  --chat-history-icon-fill-1: hsla(208, 18%, 30%, 0.4);
  --chat-history-icon-fill-2: hsl(208, 18%, 30%);

  --user-icon-fill-1: hsl(208, 18%, 82%);
  --user-icon-fill-2: hsl(208, 18%, 42%);
  --user-icon-fill-3: hsl(0, 0%, 100%);

  --spinning-loader-fill-1: hsl(208, 18%, 24%);
  --spinning-loader-fill-2: hsl(184, 70%, 92%);
  --spinning-loader-fill-3: hsla(208, 18%, 30%, 0.4);
}

.dark {
  --background: 220 10% 7%;
  --background-secondary: 220 12% 3%;

  --foreground: 270 14% 93%;
  --foreground-secondary: 248 21% 75%;

  --card: 207 17% 14%;
  --card-foreground: 270 14% 93%;

  --popover: 208 18% 24%;
  --popover-foreground: 270 14% 93%;
  --popover-input-background: 207 17% 14%;
  --popover-title: 264 14% 93%;

  --primary: 184 56% 56%;
  --primary-foreground: 0 0% 12%;

  --primary-dark: 184 60% 32%;
  --primary-dark-foreground: 0 0% 100%;

  --destructive: 0 85% 65%;

  --warning: 45 100% 70%;
  --warning-foreground: 0 0% 0%;

  --success: 148 65% 50%;
  --success-foreground: 0 0% 100%;

  --accent: 184 30% 30%;
  --accent-foreground: 184 70% 85%;

  --muted: 207 14% 24%;
  --muted-foreground: 248 21% 75%;

  --border: 207 12% 22%;

  --input: 207 12% 22%;
  --input-background: 207 17% 14%;

  --chat-input-background: 207 17% 14%;
  --chat-input-border: 207 12% 22%;

  --sidebar-accent: 207 17% 18%;
  --sidebar-accent-foreground: 184 70% 80%;

  --dropdown-menu-icon-background: 207 17% 14%;
  --dropdown-menu-icon-background-hover: 184 30% 32%;

  --dropzone-background: 207 17% 14%;
  --dropzone-border: 207 12% 22%;
  --dropzone-active-overlay: 184 56% 56% / 0.1;

  --empty-section-background: 207 17% 14%;
  --empty-section-foreground: 184 56% 56%;
  --empty-section-border: 207 12% 22%;

  --list-item-background: 207 17% 14%;
  --list-item-foreground: 184 56% 56%;
  --list-item-border: 207 12% 22%;
  --list-item-icon-background: 184 56% 56% / 0.1;

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

  --stepper-steps-background: 207 17% 16%;

  --plan-card-accent: 208 18% 22%;

  --attachment-preview-background: 208 18% 22%;

  --chat-user-message-background: 184 60% 32%;
  --chat-user-message-foreground: 0 0% 100%;
  --chat-user-message-file-type-foreground: 0 0% 100% / 0.8;

  --layout-gap-background: 220 10% 5%;

  --search-input-background: 207 17% 14%;

  --scroll-area-thumb-background: 207 12% 40%;

  --skeleton-background: 207 17% 14%;

  --icon-background: 207 17% 14%;

  --link: 184 70% 65%;

  --highlighted: 184 80% 75%;

  --chart-primary: 184 56% 56%;
  --chart-primary-dark: 184 80% 38%;
  --chart-warning: 38 95% 65%;
  --chart-info: 200 75% 65%;
  --chart-destructive: 0 80% 65%;

  --sidebar-icon-fill-1: hsl(184, 90%, 38%);
  --sidebar-icon-fill-2: hsl(184, 65%, 75%);
  --sidebar-icon-fill-3: hsl(184, 95%, 28%);
  --sidebar-icon-fill-4: hsl(184, 100%, 22%);
  --sidebar-icon-fill-1-hover: hsl(184, 90%, 45%);
  --sidebar-icon-fill-2-hover: hsl(184, 75%, 82%);
  --sidebar-icon-fill-3-hover: hsl(184, 95%, 34%);
  --sidebar-icon-fill-4-hover: hsl(184, 100%, 28%);

  --capability-icon-fill-1: hsla(184, 56%, 56%, 0.45);
  --capability-icon-fill-2: hsla(184, 56%, 56%, 0.75);
  --capability-icon-fill-3: hsl(184, 56%, 56%);
  --capability-icon-fill-4: hsl(184, 70%, 45%);
  --capability-icon-fill-5: hsla(184, 56%, 56%, 0.45);

  --chat-history-icon-fill-1: hsla(184, 56%, 56%, 0.45);
  --chat-history-icon-fill-2: hsl(184, 56%, 56%);

  --user-icon-fill-1: hsl(184, 70%, 78%);
  --user-icon-fill-2: hsl(184, 56%, 56%);
  --user-icon-fill-3: hsl(0, 0%, 100%);

  --spinning-loader-fill-1: hsl(184, 56%, 56%);
  --spinning-loader-fill-2: hsl(184, 70%, 90%);
  --spinning-loader-fill-3: hsla(184, 56%, 56%, 0.4);
}