@import url("https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;600;700&display=swap");

:root {
  --white: #ffffff;
  --white-soft: #f8f8f8;
  --white-mute: #f2f2f2;

  --black: #181818;
  --black-soft: #222222;
  --black-mute: #282828;

  --indigo: #2c3e50;

  --divider-light-1: rgba(60, 60, 60, 0.29);
  --divider-light-2: rgba(60, 60, 60, 0.12);
  --divider-dark-1: rgba(84, 84, 84, 0.65);
  --divider-dark-2: rgba(84, 84, 84, 0.48);

  --text-light-1: var(--indigo);
  --text-light-2: rgba(60, 60, 60, 0.66);
  --text-dark-1: var(--white);
  --text-dark-2: rgba(235, 235, 235, 0.64);
  --text-dark-3: rgba(235, 235, 235, 0.4);

  --base-font: "Red Hat Display", sans-serif;

  --orange: #d88621;
  --orange-2: #ffa02c;
  --orange-light: #ffc835;
  --orange-dark: #dd8300;
  --red: #af2836;
  --red-2: #dc3545;
  --red-light: #ff3333;
  --red-dark: #af1526;
  --green: #1e7732;
  --green-2: #28a745;
  --green-light: #60d160;
  --green-dark: #0b8d29;
  --blue: #025ec0;
  --blue-2: #007bff;
  --blue-light: #4fcbff;
  --blue-dark: #0460bf;

  --z-index-modal: 1000;
  --z-index-notification: 10;
  --z-index-notification-new: 1100;
  --z-index-dropdown: 400;
}

:root {
  --color-background: var(--white);
  --color-background-soft: var(--white-soft);
  --color-background-mute: var(--white-mute);
  --color-background-active: var(--orange);

  --color-border: var(--divider-light-2);
  --color-border-hover: var(--divider-light-1);

  --color-heading: var(--text-light-1);
  --color-text: var(--text-light-1);
  --color-text-muted: var(--text-light-2);

  --section-gap: 160px;

  --success-color: var(--green);
  --success-color-2: var(--green-dark);

  --error-color: var(--red);
  --error-color-2: var(--red-dark);

  --warning-color: var(--orange);
  --warning-color-2: var(--orange-dark);

  --info-color: var(--blue);
  --info-color-2: var(--blue-dark);

  --scrollbar-background: var(--divider-light-2);
  --scrollbar-thumb: var(--color-text-muted);
  --scrollbar-thumb-hover: var(--color-text);
  --scrollbar-thumb-active: var(--color-text);
  --scrollbar-border-color: var(--divider-light-2);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--black);
    --color-background-soft: var(--black-soft);
    --color-background-mute: var(--black-mute);

    --color-border: var(--divider-dark-2);
    --color-border-hover: var(--divider-dark-1);

    --color-heading: var(--text-dark-1);
    --color-text: var(--text-dark-2);
    --color-text-muted: var(--text-dark-3);

    --success-color-2: var(--green-light);
    --error-color-2: var(--red-light);
    --warning-color-2: var(--orange-light);
    --info-color-2: var(--blue-light);

    --scrollbar-background: var(--divider-dark-2);
    --scrollbar-thumb: var(--color-text-muted);
    --scrollbar-thumb-hover: var(--color-text);
    --scrollbar-thumb-active: var(--color-text);
    --scrollbar-border-color: var(--divider-dark-2);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  font-weight: normal;
}

body,
html {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  margin: 0;
}

body {
  color: var(--color-text);
  background: var(--color-background);
  transition:
    color 0.4s ease,
    background-color 0.4s ease;
}
