:root {
  /* main colors */
  --primary-color: #10b981;
  --primary-dark: #059669;
  --primary-darker: #047857;

  --secondary-color: #1e293b;
  --secondary-dark: #334155;
  --secondary-darker: #475569;

  /* bg colors */
  --bg-primary: #ffffff;
  --bg-light: #e2e8f0;

  /* typography colors */
  --text-primary: #1e293b;
  --text-light: #475569;

  /* border colors */
  --border-primary: #cbd5e1;

  /* illustration colors */
  --lines: #eef1f6;
  --lines2: #def5ed;

  /* highlight colors */
  --selection-highlight: rgba(0, 0, 0, 0.16);
  --hover-highlight: rgba(0, 0, 0, 0.08);

  /* fonts */
  --font-family: "Rubik", sans-serif;
  --font-regular: 400;
  --font-medium: 500;
  --font-bold: 700;

  --font-alt: "Chillax", sans-serif;

  /* borders */
  --border-radius: 0.5rem;
}

:root.dark-mode {
  /* changed values */
  --bg-primary: #141218;
  --bg-light: #374151;

  --text-primary: #ffffff;
  --text-light: #e2e8f0;

  --border-primary: #4b5563;

  --lines: #3f3f46;
  --lines2: #57796d;

  --selection-highlight: rgba(255, 255, 255, 0.16);
  --hover-highlight: rgba(255, 255, 255, 0.05);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* changed values */
    --bg-primary: #141218;
    --bg-light: #374151;

    --text-primary: #ffffff;
    --text-light: #e2e8f0;

    --border-primary: #4b5563;

    --lines: #3f3f46;
    --lines2: #57796d;

    --selection-highlight: rgba(255, 255, 255, 0.16);
    --hover-highlight: rgba(255, 255, 255, 0.05);
  }

  :root.light-mode {
    --bg-primary: #ffffff;
    --bg-light: #e2e8f0;

    --text-primary: #1e293b;
    --text-light: #475569;

    --border-primary: #cbd5e1;

    --lines: #eef1f6;
    --lines2: #def5ed;

    --selection-highlight: rgba(0, 0, 0, 0.16);
    --hover-highlight: rgba(0, 0, 0, 0.08);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  text-rendering: optimizeLegibility;
  font-family: var(--font-family);
  min-height: 100vh;
  color: var(--text-primary);
  color-scheme: light dark;
  transition-property: color, background-color, border-color;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}

::selection {
  background: var(--selection-highlight);
}

::-moz-selection {
  background: var(--selection-highlight);
}