:root,
.light {
  --primary: 216 16% 13%;
  --primary-foreground: 53 26% 96%;

  --primary-dark: 224 39% 30%;
  --primary-dark-foreground: 0 0% 100%;

  --background: 53 30% 99%;
  --background-secondary: 50 26% 97%;

  --accent: 50 26% 93%;
  --accent-foreground: 216 20% 16%;
  --border: 48 20% 88%;
  --sidebar-accent: 46 30% 87%;

  --success: 158 52% 40%;
  --success-foreground: 0 0% 100%;

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

  --destructive: 358 68% 45%;
  --destructive-foreground: 0 0% 100%;

  --info: 215 40% 44%;
  --info-foreground: 0 0% 100%;

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

  --chat-input-background: 50 28% 96%;
  --chat-input-border: var(--primary-dark) / 0.25;

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

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

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

  --layout-gap-background: 50 26% 95%;

  --icon-background: 50 26% 94%;

  --permission-read-background: 50 26% 92%;
  --permission-read-foreground: 216 30% 30%;

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

  --chart-primary: 215 31% 44%;
  --chart-primary-dark: 224 39% 30%;
  --chart-info: 185 42% 46%;
  --chart-success: 158 52% 40%;
  --chart-warning: 45 90% 55%;
  --chart-destructive: 358 68% 45%;
  --chart-accent: 175 34% 55%;

  --sidebar-icon-fill-1: hsl(215, 31%, 44%);
  --sidebar-icon-fill-2: hsl(200, 30%, 74%);
  --sidebar-icon-fill-3: hsl(224, 39%, 30%);
  --sidebar-icon-fill-4: hsl(216, 30%, 18%);
  --sidebar-icon-fill-1-hover: hsl(215, 34%, 38%);
  --sidebar-icon-fill-2-hover: hsl(200, 33%, 64%);
  --sidebar-icon-fill-3-hover: hsl(224, 42%, 26%);
  --sidebar-icon-fill-4-hover: hsl(216, 34%, 14%);

  --capability-icon-fill-1: hsla(200, 32%, 72%, 0.55);
  --capability-icon-fill-2: hsl(215, 31%, 44%);
  --capability-icon-fill-3: hsl(224, 39%, 30%);
  --capability-icon-fill-4: hsl(216, 30%, 18%);
  --capability-icon-fill-5: hsla(200, 32%, 72%, 0.55);
  --capability-icon-fill-disabled: hsl(0, 0%, 62%);

  --chat-history-icon-fill-1: hsla(215, 31%, 44%, 0.4);
  --chat-history-icon-fill-2: hsl(215, 31%, 44%);

  --user-icon-fill-1: hsl(200, 35%, 78%);
  --user-icon-fill-2: hsl(215, 33%, 48%);
  --user-icon-fill-3: hsl(0, 0%, 100%);

  --spinning-loader-fill-1: hsl(216, 30%, 18%);
  --spinning-loader-fill-2: hsl(50, 26%, 92%);
  --spinning-loader-fill-3: hsl(215, 33%, 55%);
}

.dark {
  --background: 216 16% 10%;
  --background-secondary: 216 22% 6%;

  --foreground: 52 22% 92%;
  --foreground-secondary: 48 10% 70%;

  --card: 216 15% 14%;
  --card-foreground: 52 22% 92%;

  --popover: 216 14% 17%;
  --popover-foreground: 52 22% 92%;
  --popover-input-background: 216 15% 14%;
  --popover-title: 52 14% 88%;

  --primary: 52 22% 88%;
  --primary-foreground: 216 24% 10%;

  --primary-dark: 215 42% 46%;
  --primary-dark-foreground: 0 0% 100%;

  --destructive: 358 72% 60%;
  --destructive-foreground: 0 0% 100%;

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

  --success: 158 55% 55%;
  --success-foreground: 216 24% 10%;

  --info: 200 55% 60%;
  --info-foreground: 216 24% 10%;

  --accent: 216 16% 26%;
  --accent-foreground: 52 22% 88%;

  --muted: 216 14% 26%;
  --muted-foreground: 48 10% 70%;

  --border: 216 12% 24%;

  --input: 216 12% 24%;
  --input-background: 216 15% 14%;

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

  --chat-input-background: 216 15% 14%;
  --chat-input-border: 216 12% 24%;

  --sidebar-accent: 216 16% 16%;
  --sidebar-accent-foreground: 52 22% 84%;

  --dropdown-menu-icon-background: 216 15% 14%;
  --dropdown-menu-icon-background-hover: 216 16% 26%;

  --dropzone-background: 216 15% 14%;
  --dropzone-border: 216 12% 24%;
  --dropzone-active-overlay: 52 22% 88% / 0.08;

  --empty-section-background: 216 15% 14%;
  --empty-section-foreground: 52 22% 88%;
  --empty-section-border: 216 12% 24%;

  --list-item-background: 216 15% 14%;
  --list-item-foreground: 52 22% 88%;
  --list-item-border: 216 12% 24%;
  --list-item-icon-background: 52 22% 88% / 0.08;

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

  --stepper-steps-background: 216 15% 16%;

  --plan-card-accent: 216 16% 20%;

  --attachment-preview-background: 216 16% 20%;

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

  --layout-gap-background: 216 22% 7.5%;

  --search-input-background: 216 15% 14%;

  --scroll-area-thumb-background: 216 10% 40%;

  --skeleton-background: 216 15% 14%;

  --icon-background: 216 15% 14%;

  --link: 185 48% 66%;

  --highlighted: 215 48% 66%;

  --chart-primary: 215 45% 62%;
  --chart-primary-dark: 224 42% 52%;
  --chart-info: 185 48% 62%;
  --chart-success: 158 55% 55%;
  --chart-warning: 45 100% 62%;
  --chart-destructive: 358 74% 62%;
  --chart-accent: 175 40% 55%;
  --chart-muted: 216 14% 26%;

  --sidebar-icon-fill-1: hsl(215, 45%, 62%);
  --sidebar-icon-fill-2: hsl(52, 24%, 80%);
  --sidebar-icon-fill-3: hsl(200, 45%, 56%);
  --sidebar-icon-fill-4: hsl(224, 42%, 52%);
  --sidebar-icon-fill-1-hover: hsl(215, 50%, 70%);
  --sidebar-icon-fill-2-hover: hsl(52, 28%, 88%);
  --sidebar-icon-fill-3-hover: hsl(200, 50%, 64%);
  --sidebar-icon-fill-4-hover: hsl(224, 46%, 60%);

  --capability-icon-fill-1: hsla(52, 24%, 82%, 0.5);
  --capability-icon-fill-2: hsl(215, 45%, 62%);
  --capability-icon-fill-3: hsl(200, 45%, 56%);
  --capability-icon-fill-4: hsl(224, 42%, 52%);
  --capability-icon-fill-5: hsla(52, 24%, 82%, 0.5);
  --capability-icon-fill-disabled: hsl(216, 8%, 56%);

  --chat-history-icon-fill-1: hsla(52, 24%, 82%, 0.5);
  --chat-history-icon-fill-2: hsl(215, 45%, 62%);

  --user-icon-fill-1: hsl(52, 24%, 82%);
  --user-icon-fill-2: hsl(215, 45%, 62%);
  --user-icon-fill-3: hsl(0, 0%, 100%);

  --spinning-loader-fill-1: hsl(215, 45%, 62%);
  --spinning-loader-fill-2: hsl(52, 24%, 86%);
  --spinning-loader-fill-3: hsl(200, 45%, 60%);
}