:root {
  --back-000: #000;
  --back-100: #010101;
  --back-200: #020202;
  --back-300: #030303;
  --back-400: #040404;
  --back-500: #050505;
  --back-600: #060606;
  --back-700: #070707;
  --back-800: #080808;
  --back-900: #1b1b1b;
  --back-1000: #1F1F1F;

  --text-ok:  hsla(0, 0%, 100%, 0.98);
  --text-90: hsla(0, 0%, 100%, 0.90);
  --text-80: hsla(0, 0%, 100%, 0.80);
  --text-70: hsla(0, 0%, 100%, 0.70);
  --text-60: hsla(0, 0%, 100%, 0.60);
  --text-50: hsla(0, 0%, 100%, 0.50);
  --text-40: hsla(0, 0%, 100%, 0.40);
  --text-30: hsla(0, 0%, 100%, 0.30);
  --text-20: hsla(0, 0%, 100%, 0.20);
  --text-10: hsla(0, 0%, 100%, 0.10);
  --text-05: hsla(0, 0%, 100%, 0.05);

  --very-bold-weight: 600;
  --bold-weight:      400;
  --normal-weight:    200;
  --light-weight:     100;

  --body-background-color: var(--back-000);
  --page-background-color: var(--back-000);

  --nav-bar-logo-color:      var(--text-60);
  --nav-bar-hamburger-color: var(--text-70);

  --dropdown-background-color:       var(--back-100);
  --dropdown-menu-item-border-color: var(--back-500);

  --dropdown-menu-item-current-color:  var(--text-90);
  --dropdown-menu-item-current-weight: var(--bold-weight);
  --dropdown-border-current-color:     var(--text-70);

  --dropdown-menu-item-normal-color:  var(--text-60);
  --dropdown-menu-item-normal-weight: var(--normal-weight);
  --dropdown-border-normal-color:     var(--text-40);

  --dropdown-menu-item-hovered-color:  var(--text-80);
  --dropdown-menu-item-hovered-weight: var(--bold-weight);
  --dropdown-border-hovered-color:     var(--text-60);

  --section-title-color:  var(--text-60);
  --section-title-weight: var(--very-bold-weight);
  --section-title-size: 1.85rem;

  --section-title-square-color:  var(--text-60);
  --section-title-square-weight: var(--light-weight);
  --section-title-square-size:   75%;

  --section-title-lighter-color:  var(--text-40);
  --section-title-lighter-weight: var(--light-weight);
  --section-title-lighter-size:   100%;

  --about-section-subtitle-size:   1.5rem;
  --about-section-subtitle-color:  var(--text-60);
  --about-section-subtitle-weight: var(--normal-weight);

  --about-callout-background-color: var(--back-900);
  --about-callout-text-color:       var(--text-60);

  --contacts-section-subtitle-color:  var(--text-50);
  --contacts-section-subtitle-weight: var(--bold-weight);
  --contacts-section-subtitle-size:   1.0rem;
  --contacts-section-text-size:       1.2rem;

  --project-item-card-background-color: hsl(0, 5%, 5%, 0.8);

  --project-item-card-icon-color: var(--text-80);

  --project-item-card-text-color:  var(--text-80);
  --project-item-card-text-weight: var(--bold-weight);
  --project-item-card-text-size:   0.8rem;

  --software-card-title-color:  var(--text-80);
  --software-card-title-weight: var(--bold-weight);
  --software-card-title-size:   1rem;

  --software-card-description-color:  var(--text-60);
  --software-card-description-weight: var(--light-weight);
  --software-card-description-size:   75%;

  --software-card-border-color: var(--text-20);

  --software-card-hovered-background-color: var(--text-05);
  --software-card-hovered-border-color:     var(--text-40);
  --software-card-hovered-text-color:       var(--text-80);

  --icon-color:      var(--text-60);

  --link-text-color:             var(--text-70);
  --link-decoration-color:       var(--text-30);
  --link-text-color-hover:       var(--text-80);
  --link-decoration-color-hover: var(--text-40);

  --text-color:  var(--text-50);
  --text-weight: 400;
  --text-size:   1rem;

  --bold-text-color: var(--text-60);
  --bold-text-weight: 700;

  --text-detail-color:  var(--text-30);
  --text-detail-weight: 400;
  --text-detail-size:   0.8rem;

  --button-background-color:  var(--back-1000);
  --button-text-color: var(--text-70);

  --button-background-hovered-color: var(--back-700);
  --button-text-hovered-color: var(--text-90);

  --footer-text-color: var(--text-40);
  --footer-text-size: 0.8rem;

  --horizontal-line-color: var(--back-1000);

  --paragraph-line-height: 1.5;
  --paragraph-margin-bottom: 1.25rem;

  --border-radius: 0.5rem;
  --border-color: var(--back-600);

  --itch-io-button-background-color:     hsl(350, 50%, 25%);
  --github-button-background-color:      hsl(250, 50%, 25%);
  --vscode-button-background-color:      hsl(226, 51%, 25%);
  --play-online-button-background-color: hsl(150, 50%, 25%);
  --view-online-button-background-color: hsl(195, 51%, 25%);
  --youtube-button-background-color:     hsl(003, 51%, 25%);

  --primary-accent: hsl(210, 100%, 60%);
  --success-accent: hsl(160, 100%, 40%);
  --warning-accent: hsl(40, 100%, 60%);
  --error-accent:   hsl(0, 90%, 65%);

  /* Shadow tokens */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);

  /* Z-index scale */
  --z-index-default: 0;
  --z-index-dropdown: 100;
  --z-index-modal: 500;
  --z-index-navbar: 1000;
  --z-index-fixed: 9999;

  /* Transition tokens */
  --transition-fast: 150ms;
  --transition-normal: 300ms;
  --transition-slow: 500ms;
  --transition-timing: ease-out;
}