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

  --foreground: 240 1% 23%;
  --foreground-secondary: 213 10% 40%;
  --card-foreground: var(--foreground);
  --popover-foreground: var(--foreground);
  --popover-title: var(--foreground-secondary);

  --primary: 213 32% 31%;
  --primary-foreground: 0 0% 100%;
  --primary-dark: 212 36% 36%;
  --primary-dark-foreground: 0 0% 100%;

  --chat-user-message-background: var(--primary-dark);
  --chat-user-message-foreground: var(--primary-dark-foreground);

  --muted: 213 25% 96.5%;
  --muted-foreground: 213 12% 42%;

  --accent: 213 34% 94.5%;
  --accent-foreground: var(--primary-dark);
  --border: 213 28% 88%;
  --input: 213 22% 90%;

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

  --chat-input-background: var(--card);
  --chat-input-border: 213 32% 31% / 0.24;

  --sidebar-accent: 213 32% 92.5%;

  --dropdown-menu-icon-background: var(--accent);
  --dropdown-menu-icon-background-hover: 213 32% 31% / 0.14;

  --dropzone-border: 213 32% 31% / 0.28;
  --dropzone-active-overlay: 213 32% 31% / 0.08;

  --empty-section-border: 213 32% 31% / 0.28;

  --list-item-border: 213 32% 31% / 0.28;
  --list-item-icon-background: 213 32% 31% / 0.08;

  --plan-card-accent: var(--accent);
  --layout-gap-background: var(--accent);
  --icon-background: var(--accent);
  --logo-tile-background: 213 30% 40% / 0.08;

  --chart-primary: 213 36% 44%;
  --chart-primary-dark: 207 54% 24%;
  --chart-destructive: 9 72% 54%;
  --chart-muted: 159 40% 38%;
  --chart-accent: 351 34% 38%;
  --chart-warning: 38 82% 41%;
  --chart-info: 193 100% 36%;

  --permission-read-background: 213 32% 93%;
  --permission-read-foreground: var(--primary);

  --sidebar-icon-fill-1: hsl(213, 36%, 44%);
  --sidebar-icon-fill-2: hsla(213, 45%, 55%, 0.35);
  --sidebar-icon-fill-3: hsl(213, 32%, 31%);
  --sidebar-icon-fill-4: hsl(207, 54%, 24%);
  --sidebar-icon-fill-1-hover: hsl(213, 36%, 36%);
  --sidebar-icon-fill-2-hover: hsla(213, 42%, 45%, 0.42);
  --sidebar-icon-fill-3-hover: hsl(213, 34%, 25%);
  --sidebar-icon-fill-4-hover: hsl(207, 56%, 19%);

  --capability-icon-fill-1: hsla(213, 45%, 55%, 0.38);
  --capability-icon-fill-2: hsla(213, 40%, 45%, 0.68);
  --capability-icon-fill-3: hsl(213, 36%, 44%);
  --capability-icon-fill-4: hsl(213, 32%, 31%);
  --capability-icon-fill-5: hsla(213, 45%, 55%, 0.38);
  --capability-icon-fill-disabled: hsl(0, 0%, 62%);

  --chat-history-icon-fill-1: hsla(213, 45%, 55%, 0.38);
  --chat-history-icon-fill-2: hsl(213, 36%, 44%);

  --user-icon-fill-1: hsl(213, 40%, 82%);
  --user-icon-fill-2: hsl(213, 30%, 52%);
  --user-icon-fill-3: hsl(0, 0%, 100%);

  --spinning-loader-fill-1: hsl(207, 54%, 24%);
  --spinning-loader-fill-2: hsl(213, 34%, 92%);
  --spinning-loader-fill-3: hsla(213, 40%, 45%, 0.4);
}

.dark {
  --background: 213 30% 11%;
  --background-secondary: 214 36% 8%;

  --foreground: 210 20% 95%;
  --foreground-secondary: 213 14% 76%;

  --card: 213 26% 15%;
  --card-foreground: var(--foreground);

  --popover: 213 22% 20%;
  --popover-foreground: var(--foreground);
  --popover-input-background: var(--card);
  --popover-title: var(--foreground);

  --primary: 211 52% 74%;
  --primary-foreground: 213 40% 12%;

  --primary-dark: 207 52% 36%;
  --primary-dark-foreground: 0 0% 100%;

  --accent: 213 24% 26%;
  --accent-foreground: var(--foreground);

  --muted: 213 18% 24%;
  --muted-foreground: var(--foreground-secondary);

  --border: 213 13% 32%;

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

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

  --sidebar-accent: 213 24% 20%;
  --sidebar-accent-foreground: 211 56% 84%;

  --dropdown-menu-icon-background: var(--card);
  --dropdown-menu-icon-background-hover: 213 24% 26%;

  --dropzone-background: var(--card);
  --dropzone-border: var(--border);
  --dropzone-active-overlay: 211 52% 74% / 0.12;

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

  --list-item-background: var(--card);
  --list-item-foreground: var(--primary);
  --list-item-border: var(--border);
  --list-item-icon-background: 211 52% 74% / 0.12;

  --stepper-steps-background: 213 22% 22%;
  --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: 214 36% 9.5%;
  --search-input-background: var(--card);
  --scroll-area-thumb-background: 213 12% 50%;
  --skeleton-background: var(--card);
  --icon-background: var(--card);

  --link: 211 60% 78%;
  --highlighted: 211 66% 80%;
  --chart-primary: var(--primary);
  --chart-primary-dark: 207 56% 55%;
  --chart-destructive: 9 84% 68%;
  --chart-muted: 159 42% 58%;
  --chart-accent: 350 52% 72%;
  --chart-warning: 38 90% 62%;
  --chart-info: 193 82% 58%;

  --permission-read-background: 213 24% 24%;
  --permission-read-foreground: var(--primary);

  --sidebar-icon-fill-1: hsl(211, 55%, 72%);
  --sidebar-icon-fill-2: hsla(211, 50%, 84%, 0.55);
  --sidebar-icon-fill-3: hsl(211, 48%, 60%);
  --sidebar-icon-fill-4: hsl(207, 55%, 48%);
  --sidebar-icon-fill-1-hover: hsl(211, 62%, 82%);
  --sidebar-icon-fill-2-hover: hsla(211, 58%, 90%, 0.72);
  --sidebar-icon-fill-3-hover: hsl(211, 52%, 68%);
  --sidebar-icon-fill-4-hover: hsl(207, 58%, 56%);

  --capability-icon-fill-1: hsl(213, 36%, 92%);
  --capability-icon-fill-2: hsl(211, 52%, 62%);
  --capability-icon-fill-3: hsl(207, 55%, 48%);
  --capability-icon-fill-4: hsl(211, 48%, 58%);
  --capability-icon-fill-5: hsl(213, 36%, 92%);
  --capability-icon-fill-disabled: hsl(213, 10%, 60%);

  --chat-history-icon-fill-1: hsla(211, 50%, 84%, 0.55);
  --chat-history-icon-fill-2: hsl(211, 52%, 62%);

  --user-icon-fill-1: hsl(211, 48%, 82%);
  --user-icon-fill-2: hsl(211, 40%, 60%);
  --user-icon-fill-3: hsl(0, 0%, 100%);

  --spinning-loader-fill-1: hsl(207, 55%, 48%);
  --spinning-loader-fill-2: hsl(213, 30%, 90%);
  --spinning-loader-fill-3: hsl(211, 52%, 70%);
}