:root {
  /* Benchmark colors */
  --dark: #00212b;
  --dark-highlight: #00697f;
  --dark-highlight-contrast: #fcfcfc;

  --dark-matt: #0d181b;
  --dark-lighter: #002732;
  --dark-dimmer: #000000;

  --dark-secondary: #00161d;
  --dark-secondary-matt: #091315;

  --dark-secondary-lighter: #001c24;
  --dark-secondary-dimmer: #000000;

  --light: #f2f2f2;
  --light-highlight: #cbcccc;
  --light-highlight-contrast: #020202;

  --light-matt: #f7f7f7;
  --light-lighter: #f4f4f4;
  --light-dimmer: #d8d9d9;
  
  --light-secondary: #f4f4f5;
  --light-secondary-matt: #f9f9fa;
  --light-secondary-lighter: #f7f7f7;
  --light-secondary-dimmer: #dadbdc;
  --highlight1: #cbcccc;
  
  --highlight2: #d5d6d6;
  
  --highlight3: #e0e0e0;
  
  --highlight4: #eaeaea;
  
  --gradient-highlight1: linear-gradient(to bottom right, var(--highlight1), var(--highlight2));
  --gradient-highlight2: linear-gradient(to bottom right, var(--highlight2), var(--highlight3));
  --gradient-highlight3: linear-gradient(to bottom right, var(--highlight3), var(--highlight4));
  --highlight-contrast: var(--light-highlight-contrast);
  
  /* Main color */
  --primary: #c1dee4;
  --primary-nuance: #d6e7e9;
  --primary-text-contrast: #020202;
  --secondary: #c6d9e0;
  --secondary-nuance: #b2ccd5;
  --secondary-text-contrast: #020202;
  --gradient: linear-gradient(to bottom right, var(--primary), var(--primary-nuance));
  --gradient-secondary: linear-gradient(to bottom right, var(--secondary), var(--secondary-nuance));
  --gradient-primary-secondary: linear-gradient(to bottom right, var(--primary), var(--secondary));
  --gradient-primary-secondary-nuance: linear-gradient(to bottom right, var(--primary-nuance), var(--secondary-nuance));
  --gradient-secondary-primary: linear-gradient(to bottom right, var(--secondary), var(--primary));
  --gradient-secondary-primary-nuance: linear-gradient(to bottom right, var(--secondary-nuance), var(--primary-nuance));


  /* Colors for text and backgrounds */
  --text: #00212b;
  --text-secondary: #00161d;
  --text-highlight: #0a0909;

  /* backgrounds */
  --bg: var(--light);
  --bg-soft: var(--light-lighter);
  --bg-secondary: var(--light-secondary);
  --bg-secondary-soft: var(--light-secondary-lighter);
  
  --bg-highlight-contrast: var(--light-highlight-contrast);
  
  --bg-gradient: linear-gradient(to bottom right, var(--bg), var(--bg-soft));
  --bg-gradient-secondary: linear-gradient(to bottom right, var(--bg-secondary), var(--bg-secondary-soft));

  /* Complementary 1 */
  --comp1: #040404;
  --comp1-alt: #080000;
  --comp1-text-contrast: #fcfcfc;
  --comp1-text-contrast-secondary: #fcfcfc;
  --comp1-text-contrast-highlight: #fcfcfc;

  /* Complementary 2 */
  --comp2: #f9f9f9;
  --comp2-alt: #ffffff;
  --comp2-text-contrast: #020202;
  --comp2-text-contrast-secondary: #020202;
  --comp2-text-contrast-highlight: #020202;
  
  /* Other interface elements */
  --border-color: #1e4047;
  --shadow-color: #c1dee419;
  --shadow-color-strong: #c1dee433;
  --divider: #699daf;

  /* actions (nav, tabs, buttons, forms) */
  --navbg: var(--bg-soft);
  --navtext: var(--text);
  --navtext-secondary: var(--text-secondary);

  --container-bg: var(--light-dimmer);
  --container: var(--dark-dimmer);

  --active-bg: var(--gradient-highlight3);
  --active: var(--highlight-contrast);

  --hover-bg: var(--secondary);
  --hover: var(--secondary-text-contrast);

  --btn: var(--dark-matt);
  --btn-bg: var(--light);

  --btn-primary: var(--comp1-text-contrast);
  --btn-primary-bg: linear-gradient(to right, var(--comp1), var(--comp1-alt));

  --btn-secondary: var(--comp2-text-contrast);
  --btn-secondary-bg: linear-gradient(to right, var(--comp2), var(--comp2-alt));

  --link: #0a0909;  
  --link-hover: #0a0909b2;
  --link-visited: #0a0909b2;
  --link-icon: #0a0909;
  --link-icon-hover: #0a0909b2;

  --link-bg: #c1dee419;
  --link-bg-hover: #c1dee433;

}