:root {
  /* Colors */
  --color-primary-main: #222222;
  --color-primary-main2: #000000;
  --color-primary: #fe8d1d;
  --color-secondary: #fabc49;
  --color-accent: #51ade9;
  --color-background: rgba(255, 255, 255, 0.9);
  --color-background-full: rgba(255, 255, 255, 1);
  --color-background-semi: rgba(255, 255, 255, 0.5);
  --color-background-dark: #132d3e;
  --color-background-alt: #f8e9b7;
  --color-text-primary: #222222;
  --color-text-secondary: #555555;
  --color-placeholder: #00000080;
  --color-dark: #d9d9d9;

  /* Fonts */
  --font-size-base: 16px;
  --font-family-main: "Inter", sans-serif;
  --font-size-small: 0.875rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.25rem;
  --font-size-xlarge: 1.5rem;
  --font-size-xxlarge: 2rem;
  --font-size-input: 1rem;
  --font-size-submit: 1rem;

  /* Spacing */
  --spacing-small: 0.3125rem;
  --spacing-medium: 0.625rem;
  --spacing-large: 1.25rem;
  --spacing-xlarge: 3.125rem;
  --spacing-xxlarge: 3.75rem;

  /* Sizes */
  --width-input: 38.125rem;
  --height-input: 1.875rem;
  --width-input-small: 92%;
  --height-input-small: 2.5rem;
  --width-switch: 2.5rem;
  --height-switch: 1.125rem;
  --width-switch-thumb: 0.875rem;
  --width-login: 42.5rem;
  --height-login: 21.375rem;

  /* Borders */
  --border-radius-small: 0.3125rem;
  --border-radius-medium: 0.5rem;
  --border-radius-large: 0.625rem;
  --border-radius-xlarge: 0.75rem;
  --border-radius-switch: 2.125rem;
  --border-none: none;

  /* Shadows */
  --box-shadow-default: 0rem 0.25rem 3.125rem 0rem rgba(0, 0, 0, 0.25);
}

/* General Styles 
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*/

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
}

/* Dark Mode */

body.dark-mode {
  --color-background: #121212;
  --color-background-full: #121212;
  --color-background-semi: rgba(255, 255, 255, 0.1);
  --color-background-alt: #1f1f1f;

  --color-primary-main2: #ffffff; /* replaces black text */
  --color-text-secondary: #aaaaaa; /* replaces grey text */
  --color-dark: #333333;

  --color-text-primary: #ffffff;
  --color-text-secondary: #cccccc;
  --color-placeholder: #bbbbbb;

  --color-primary: #fe8d1d;
  --color-secondary: #fabc49;

  background-color: var(--color-background);
  color: var(--color-text-primary);
}

body.dark-mode h2 {
  color: var(--color-text-primary);
}