:root {

  --clr-background: #F4F4F4;
  --clr-text: #000;
  --clr-primary: #000;
  --clr-primary-text: #fff;
  --clr-accent: #FBBB08;
  --clr-accent-hover: #e6b526;
  --clr-border: #333;


  --font-primary: "Fira Sans", sans-serif;
  --font-mono: "Fira Code", monospace, sans-serif;


  --max-width: 1400px;
  --header-height: 80px;


  --space-xs: 5px;
  --space-sm: 10px;
  --space-md: 15px;
  --space-lg: 20px;
  --space-xl: 30px;
  --space-xxl: 40px;

  --gap-lg: 10px;


  --border-thin: 1px solid var(--clr-primary);
  --border-medium: 2px solid var(--clr-primary);
  --border-thick: 3px solid var(--clr-primary);
  --border-black-thick: 3px solid black;
}

.dark-mode {

  --clr-background: #1a1a1a;
  --clr-text: #ffffff;
  --clr-primary: #ffffff;
  --clr-primary-text: #000000;
  --clr-accent: #FBBB08;
  --clr-accent-hover: #e6b526;
  --clr-border: #666666;

  --clr-scrollbar: #333333;
  --clr-loader-bg: #2a2a2a;
  --clr-placeholder: #404040;
}

@media (prefers-color-scheme: dark) {
  .body.dark-mode {
    --clr-background: #1a1a1a;
    --clr-text: #ffffff;
    --clr-primary: #ffffff;
    --clr-primary-text: #000000;
    --clr-border: #666666;
  }
}