:root,
.light {
  --primary: 96 54% 33%;
  --primary-foreground: 0 0% 100%;
  --primary-dark: 96 52% 40%;
  --primary-dark-foreground: 0 0% 100%;

  --background: 120 24% 99%;
  --background-secondary: 114 30% 96%;

  --foreground: 201 22% 18%;
  --foreground-secondary: 201 12% 40%;

  --accent: 110 45% 94%;
  --accent-foreground: var(--primary);
  --border: 114 30% 87%;
  --sidebar-accent: 114 30% 89%;
  --sidebar-accent-foreground: 96 56% 26%;

  --success: 145 62% 32%;
  --success-foreground: 0 0% 100%;

  --toast-success-foreground: 0 0% 100%;

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

  --destructive: 8 75% 46%;
  --destructive-foreground: 0 0% 100%;

  --info: 205 75% 42%;
  --info-foreground: 0 0% 100%;

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

  --chat-input-background: 114 40% 97%;
  --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;

  --layout-gap-background: 114 30% 93%;

  --link: 96 56% 30%;
  --highlighted: 96 56% 30%;

  --permission-read-background: 110 40% 90%;
  --permission-read-foreground: 96 56% 26%;

  --chart-primary: 96 50% 40%;
  --chart-primary-dark: 96 56% 25%;
  --chart-info: 205 75% 44%;
  --chart-warning: 36 95% 40%;
  --chart-success: 160 55% 36%;
  --chart-destructive: var(--destructive);

  --sidebar-icon-fill-1: hsl(96, 50%, 42%);
  --sidebar-icon-fill-2: hsl(110, 45%, 78%);
  --sidebar-icon-fill-3: hsl(96, 56%, 30%);
  --sidebar-icon-fill-4: hsl(201, 30%, 30%);
  --sidebar-icon-fill-1-hover: hsl(96, 56%, 34%);
  --sidebar-icon-fill-2-hover: hsl(110, 45%, 66%);
  --sidebar-icon-fill-3-hover: hsl(96, 58%, 24%);
  --sidebar-icon-fill-4-hover: hsl(201, 34%, 24%);

  --capability-icon-fill-1: hsla(96, 50%, 45%, 0.4);
  --capability-icon-fill-2: hsla(96, 50%, 45%, 0.7);
  --capability-icon-fill-3: hsl(96, 50%, 42%);
  --capability-icon-fill-4: hsl(201, 30%, 32%);
  --capability-icon-fill-5: hsla(96, 50%, 45%, 0.4);
  --capability-icon-fill-disabled: hsl(0, 0%, 62%);

  --chat-history-icon-fill-1: hsla(96, 50%, 42%, 0.4);
  --chat-history-icon-fill-2: hsl(96, 50%, 42%);

  --user-icon-fill-1: hsl(110, 45%, 78%);
  --user-icon-fill-2: hsl(96, 52%, 42%);
  --user-icon-fill-3: hsl(0, 0%, 100%);

  --spinning-loader-fill-1: hsl(96, 56%, 30%);
  --spinning-loader-fill-2: hsl(110, 40%, 90%);
  --spinning-loader-fill-3: hsla(96, 50%, 45%, 0.4);
}

.dark {
  --background: 201 24% 15%;
  --background-secondary: 201 32% 9%;

  --foreground: 114 22% 92%;
  --foreground-secondary: 140 10% 72%;

  --card: 201 20% 18%;
  --card-foreground: 114 22% 92%;

  --popover: 201 20% 23%;
  --popover-foreground: 114 22% 92%;
  --popover-input-background: 201 20% 18%;
  --popover-title: 114 15% 88%;

  --primary: 96 58% 66%;
  --primary-foreground: 201 40% 10%;

  --primary-dark: 96 55% 58%;
  --primary-dark-foreground: 201 45% 10%;

  --destructive: 8 78% 60%;
  --destructive-foreground: 0 0% 100%;

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

  --success: 145 55% 55%;
  --success-foreground: 0 0% 10%;

  --toast-success-background: 145 55% 32%;
  --toast-success-foreground: 0 0% 100%;

  --info: 205 78% 62%;
  --info-foreground: 0 0% 10%;

  --accent: 150 14% 26%;
  --accent-foreground: 114 22% 92%;

  --muted: 150 14% 26%;
  --muted-foreground: 140 10% 72%;

  --border: 200 12% 28%;

  --input: 200 12% 28%;
  --input-background: 201 20% 18%;

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

  --chat-input-background: 201 20% 18%;
  --chat-input-border: 200 12% 28%;

  --sidebar-accent: 201 22% 24%;
  --sidebar-accent-foreground: 96 58% 68%;

  --dropdown-menu-icon-background: 201 20% 18%;
  --dropdown-menu-icon-background-hover: 150 14% 30%;

  --dropzone-background: 201 20% 18%;
  --dropzone-border: 200 12% 28%;
  --dropzone-active-overlay: 96 58% 66% / 0.1;

  --empty-section-background: 201 20% 18%;
  --empty-section-foreground: 96 58% 66%;
  --empty-section-border: 200 12% 28%;

  --list-item-background: 201 20% 18%;
  --list-item-foreground: 96 58% 66%;
  --list-item-border: 200 12% 28%;
  --list-item-icon-background: 96 58% 66% / 0.1;

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

  --stepper-steps-background: 201 20% 16%;

  --plan-card-accent: 201 20% 22%;

  --attachment-preview-background: 201 20% 22%;

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

  --layout-gap-background: 201 30% 12%;

  --search-input-background: 201 20% 18%;

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

  --skeleton-background: 201 20% 18%;

  --icon-background: 201 20% 18%;

  --link: 96 62% 68%;

  --highlighted: 96 62% 70%;

  --chart-primary: 96 58% 60%;
  --chart-primary-dark: 96 52% 48%;
  --chart-info: 200 70% 62%;
  --chart-warning: 45 90% 62%;
  --chart-success: 160 50% 55%;
  --chart-destructive: 8 80% 64%;

  --sidebar-icon-fill-1: hsl(96, 58%, 60%);
  --sidebar-icon-fill-2: hsl(110, 40%, 75%);
  --sidebar-icon-fill-3: hsl(96, 50%, 46%);
  --sidebar-icon-fill-4: hsl(201, 30%, 55%);
  --sidebar-icon-fill-1-hover: hsl(96, 62%, 66%);
  --sidebar-icon-fill-2-hover: hsl(110, 45%, 82%);
  --sidebar-icon-fill-3-hover: hsl(96, 54%, 52%);
  --sidebar-icon-fill-4-hover: hsl(201, 34%, 62%);

  --capability-icon-fill-1: hsla(96, 58%, 62%, 0.45);
  --capability-icon-fill-2: hsla(96, 58%, 62%, 0.75);
  --capability-icon-fill-3: hsl(96, 58%, 62%);
  --capability-icon-fill-4: hsl(201, 30%, 58%);
  --capability-icon-fill-5: hsla(96, 58%, 62%, 0.45);
  --capability-icon-fill-disabled: hsl(140, 8%, 58%);

  --chat-history-icon-fill-1: hsla(96, 58%, 62%, 0.45);
  --chat-history-icon-fill-2: hsl(96, 58%, 62%);

  --user-icon-fill-1: hsl(110, 40%, 75%);
  --user-icon-fill-2: hsl(96, 58%, 60%);
  --user-icon-fill-3: hsl(0, 0%, 100%);

  --spinning-loader-fill-1: hsl(96, 58%, 60%);
  --spinning-loader-fill-2: hsl(110, 40%, 86%);
  --spinning-loader-fill-3: hsla(96, 58%, 62%, 0.4);
}