:root {
  --c-main-bg: transparent;
  --c-sidebar-bg: #1f0d415d;
  --c-topbar-bg: #1f0d415d;
  --c-surface-bg: #ffffff0d;
  --c-surface-alt: #d2d7d9bf;
  --c-text-1: #dadada;
  --c-text-2: #dadada;
  --c-text-3: #dadada;
  --c-text-4: #dadada;
  --c-text-muted: #dadada80;
  --c-text-footer: #dadada40;
  --c-brand-primary: #8d9193;
  --c-brand-secondary: #535353;
  --c-brand-tertiary: #4a4a4a;
  --c-accent: #535353;
  --c-cards: #1a1a1ab3; 
  --c-shadow: #000000;
  --c-shadow-light: #00000080;
  --c-hover: #ffffff1a;
  --c-hover-white: #ffffff26;
}

@media screen and (max-width: 768px) {
  :root {
    --c-main-bg: #0c0c0c;
    --c-sidebar-bg: #1f0d41;
    --c-topbar-bg: #1f0d41;
    --c-surface-bg: #202020;
    --c-surface-alt: #d2d7d9;
    --c-text-1: #dadada;
    --c-text-2: #dadada;
    --c-text-3: #dadada;
    --c-text-4: #dadada;
    --c-text-muted: #dadada80;
    --c-text-footer: #dadada40;
    --c-brand-primary: #8d9193;
    --c-brand-secondary: #535353;
    --c-brand-tertiary: #4a4a4a;
    --c-accent: #535353;
    --c-cards: #1a1a1a;
    --c-shadow: #000000;
    --c-shadow-light: #00000080;
    --c-hover: #ffffff1a;
    --c-hover-white: #ffffff26;
  }
}