:root {
  /* Benchmark colors */
  --dark: #00102d;
  --dark-highlight: #00427f;
  --dark-highlight-contrast: #fcfcfc;

  --dark-matt: #0a141e;
  --dark-lighter: #001335;
  --dark-dimmer: #000000;

  --dark-secondary: #000a1f;
  --dark-secondary-matt: #0e0f0f;

  --dark-secondary-lighter: #000d26;
  --dark-secondary-dimmer: #000000;

  --light: #f1f2f2;
  --light-highlight: #c9ccce;
  --light-highlight-contrast: #020202;

  --light-matt: #f7f7f7;
  --light-lighter: #f4f4f5;
  --light-dimmer: #d7d8da;
  
  --light-secondary: #f4f4f5;
  --light-secondary-matt: #f9f9fa;
  --light-secondary-lighter: #f6f7f7;
  --light-secondary-dimmer: #d9dbdc;
  --highlight1: #c9ccce;
  
  --highlight2: #d4d6d7;
  
  --highlight3: #dfe0e1;
  
  --highlight4: #e9eaeb;
  
  --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: #0055a4;
  --primary-nuance: #0970b4;
  --primary-text-contrast: #fcfcfc;
  --secondary: #08489b;
  --secondary-nuance: #063a7e;
  --secondary-text-contrast: #fcfcfc;
  --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: #00102d;
  --text-secondary: #000a1f;
  --text-highlight: #0b0a09;

  /* 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: #fcfcfc;
  --comp1-alt: #fefafa;
  --comp1-text-contrast: #020202;
  --comp1-text-contrast-secondary: #020202;
  --comp1-text-contrast-highlight: #020202;

  /* Complementary 2 */
  --comp2: #ee3c30;
  --comp2-alt: #f16056;
  --comp2-text-contrast: #fcfcfc;
  --comp2-text-contrast-secondary: #fcfcfc;
  --comp2-text-contrast-highlight: #fcfcfc;
  
  /* Other interface elements */
  --border-color: #001a33;
  --shadow-color: #0055a419;
  --shadow-color-strong: #0055a433;
  --divider: #0b65da;

  /* 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: #0b0a09;  
  --link-hover: #0b0a09b2;
  --link-visited: #0b0a09b2;
  --link-icon: #0b0a09;
  --link-icon-hover: #0b0a09b2;

  --link-bg: #0055a419;
  --link-bg-hover: #0055a433;

}