:root {
  /* Base colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-light-gray: #dddddd;
  --color-dark-gray: #303030;
  --color-mid-gray: #808080;

  /* Text */
  --color-text-default: #000000;
  --color-text-inverse: #ffffff;
  --color-text-grey: #303030;

  /* Navbar */
  --color-navbar-bg-scrolled: rgba(0, 0, 0, 0.9);
  --color-navbar-link: #ffffff;

  /* Overlays */
  --color-overlay-transparent: rgba(0, 0, 0, 0);
  --color-overlay-dark: rgba(0, 0, 0, 0.9);
  --color-overlay-hero: rgba(0, 0, 0, 0.5);

  /* Borders */
  --border-input-default: #aaaaaa;

  /* Shadows */
  --shadow-hero-text: 5px 5px 7px rgba(0, 0, 0, 0.9);
  --shadow-card-text: 1px 1px 5px rgba(0, 0, 0, 0.9);
  --shadow-card-login-form: 1px 1px 5px rgba(0, 0, 0, 0.9);

  /* Gradients */
  --gradient-card-overlay: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.8),
    transparent
  );
}