:root,
:root[data-theme='dark'] {
  color-scheme: dark;
  --c-bg: #1E1E1E;
  --c-bg-dark: #161616;
  --c-bg-highlight: #3B3B3D;
  --c-bg-sidebar: #262625;
  --c-header-bg: #262625;
  --c-fg: #F5F5F7;
  --c-fg-dark: #D1D1D6;
  --c-fg-muted: #ADAAAB;
  --c-border: #4A4A4A;
  --c-border-light: #38383A;
  --c-accent: #3478F6;
  --c-accent-text: #8FB9F7;
  --c-accent-solid: #4C403A;
  --c-accent-solid-hover: #584A42;
  --c-accent-solid-text: #F5F5F7;
  --c-accent-hover: #4D95F7;
  --c-accent-muted: #3478F626;
  --c-error: #FF8A80;
  --c-error-solid: #C53B32;
  --c-error-solid-hover: #B3261E;
  --c-success: #32D74B;
  --c-warning: #FFD60A;
  --c-sidebar-fg: #F5F5F7;
  --c-sidebar-fg-muted: #ADAAAB;
  --c-sidebar-border: #3A3A3C;
  --c-user-bubble-bg: #3478F626;
  --c-user-bubble-border: #3478F64D;
  --font-sans: 'Manrope', 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--c-bg);
}

:root[data-theme='light'] {
  color-scheme: light;
  --c-bg: #FFFFFF;
  --c-bg-dark: #E9E9EB;
  --c-bg-highlight: #F7F7F8;
  --c-bg-sidebar: #ECECEC;
  --c-header-bg: #F7F7F8;
  --c-fg: #1C1C1E;
  --c-fg-dark: #3A3A3C;
  --c-fg-muted: #666465;
  --c-border: #D1D1D6;
  --c-border-light: #E5E5EA;
  --c-accent: #3478F6;
  --c-accent-text: #1559C5;
  --c-accent-solid: #E4E1DE;
  --c-accent-solid-hover: #DCD8D4;
  --c-accent-solid-text: #1C1C1E;
  --c-accent-hover: #2068E3;
  --c-accent-muted: #3478F61A;
  --c-error: #9F1C16;
  --c-error-solid: #C53B32;
  --c-error-solid-hover: #B3261E;
  --c-success: #0B6B3A;
  --c-warning: #704A00;
  --c-sidebar-fg: #1C1C1E;
  --c-sidebar-fg-muted: #666465;
  --c-sidebar-border: #D1D1D6;
  --c-user-bubble-bg: #3478F61A;
  --c-user-bubble-border: #3478F640;
}

:root[data-font='inter'] {
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
}

body {
  background-color: var(--c-bg);
  color: var(--c-fg);
  font-family: var(--font-sans);
}