:root {
  --theme-secondary-color: #cedae2;
  --theme-container-background: #141f2d;
  --theme-container-accent-background: #202c3d;
  --theme-container-background-hover: #1c2c3f;
  --theme-container-box-shadow: none;
  --theme-container-border: 1px solid #22303f;
  --theme-social-icon-invert: invert(100%);
  --theme-color: #ffffff;

  // Base
  --base-100: #f9fafa;
  --base-90: #dde0e2;
  --base-80: #c2c6ca;
  --base-70: #a7adb2;
  --base-60: #8d949b;
  --base-50: #747c85;
  --base-40: #5c6570;
  --base-30: #444f5b;
  --base-20: #2e3a48;
  --base-10: #1a2634;
  --base-0: #0d1219;
  --base-inverted: #000;

  // Accent colors
  --accent-brand: #3b49df;
  --accent-brand-darker: #1827ce;
  --accent-brand-lighter: #8d95f2;

  // Success
  --accent-success: #26d9ca;
  --accent-success-darker: #1ab3a6;
  --accent-success-lighter: #79ece2;

  // Warning
  --accent-warning: #ffcf4c;
  --accent-warning-darker: #f5b400;
  --accent-warning-lighter: #ffe499;

  // Danger
  --accent-danger: #dc1818;
  --accent-danger-darker: #c20a0a;
  --accent-danger-lighter: #ec5050;

  // Main colors
  --body-bg: var(--base-0);
  --body-color: var(--base-100);
  --body-color-inverted: var(--base-inverted);

  // Main content containers
  --card-bg: var(--base-10);
  --card-color: var(--base-100);
  --card-color-secondary: var(--base-70);
  --card-color-tertiary: var(--base-50);
  --card-secondary-bg: var(--base-10);
  --card-secondary-color: var(--base-90);
  --card-headline-color: var(--base-100);

  // Header
  --header-bg: var(--base-10);
  --header-bg-hover: var(--base-0);
  --header-bg-current: var(--base-20);
  --header-shadow: rgba(0, 0, 0, 0.3);
  --header-icons-color: rgba(255, 255, 255, 0.8);
  --header-icons-color-hover: #fff;

  // Logo
  --logo-bg: #0a0a0a;
  --logo-color: #fff;

  // Footer
  --footer-bg: var(--base-inverted);
  --footer-copy-color: var(--base-80);
  --footer-copy-secondary-color: var(--base-60);
  --footer-link-color: var(--base-80);
  --footer-link-color-hover: var(--base-100);

  // Links
  --link-color: var(--base-90);
  --link-color-hover: var(--accent-brand-lighter);
  --link-bg-hover: var(--base-0);
  --link-bg-hover-alt: var(--base-inverted);
  --link-brand-color: #17a1f6;
  --link-color-current: var(--base-100);
  --link-color-secondary: var(--base-70);
  --link-color-secondary-hover: var(--base-80);
  --link-bg-current: var(--base-inverted);

  // Primary buttons
  --button-primary-bg: var(--accent-success);
  --button-primary-bg-hover: var(--accent-success-darker);
  --button-primary-color: var(--base-0);
  --button-primary-color-hover: var(--base-inverted);
  //-- Inverted
  --button-primary-inverted-bg: var(--accent-success);
  --button-primary-inverted-bg-hover: var(--accent-success-darker);
  --button-primary-inverted-color: var(--base-0);
  --button-primary-inverted-color-hover: var(--base-0);

  // Secondary buttons
  --button-secondary-bg: var(--base-20);
  --button-secondary-bg-hover: var(--base-30);
  --button-secondary-color: var(--base-80);
  --button-secondary-color-hover: var(--base-100);
  //-- Inverted
  --button-secondary-inverted-bg: var(--base-70);
  --button-secondary-inverted-bg-hover: var(--base-60);
  --button-secondary-inverted-color: var(--base-10);
  --button-secondary-inverted-color-hover: var(--base-0);

  // Outlined buttons
  --button-outlined-bg: transparent;
  --button-outlined-bg-hover: rgba(255, 255, 255, 0.035);
  --button-outlined-border: var(--base-20);
  --button-outlined-border-hover: var(--base-30);
  --button-outlined-color: var(--base-80);
  --button-outlined-color-hover: var(--base-100);
  //-- Inverted
  --button-outlined-inverted-bg: transparent;
  --button-outlined-inverted-bg-hover: rgba(0, 0, 0, 0.1);
  --button-outlined-inverted-border: var(--base-60);
  --button-outlined-inverted-border-hover: var(--base-40);
  --button-outlined-inverted-color: var(--base-30);
  --button-outlined-inverted-color-hover: var(--base-10);

  // Ghost buttons
  --button-ghost-bg: transparent;
  --button-ghost-bg-hover: rgba(255, 255, 255, 0.035);
  --button-ghost-color: var(--base-80);
  --button-ghost-color-hover: var(--base-100);
  //-- Inverted
  --button-ghost-inverted-bg: transparent;
  --button-ghost-inverted-bg-hover: rgba(0, 0, 0, 0.1);
  --button-ghost-inverted-color: var(--base-30);
  --button-ghost-inverted-color-hover: var(--base-10);

  // Forms
  --form-bg: var(--base-20);
  --form-bg-focus: var(--base-0);
  --form-border: var(--base-30);
  --form-border-hover: var(--base-40);
  --form-border-focus: var(--accent-brand);
  --form-placeholder-color: var(--base-60);

  // Form lables
  --label-primary: var(--base-90);
  --label-secondary: var(--base-60);

  // Default box
  --box: var(--base-0);
  --box-darker: var(--base-inverted);

  // Indicators
  --indicator-accent-bg: var(--accent-brand);
  --indicator-accent-color: var(--body-color);
  --indicator-critical-bg: var(--accent-danger);
  --indicator-critical-color: var(--body-color);
  --indicator-default-bg: var(--button-secondary-bg);
  --indicator-default-color: var(--button-secondary-color);
}
