:root {
  --theme-secondary-color: #ebebeb;
  --theme-container-background: #030303;
  --theme-container-accent-background: #000f0b;
  --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: #ffffff;
  --base-90: #e3e3e3;
  --base-80: #c8c8c8;
  --base-70: #adadad;
  --base-60: #939393;
  --base-50: #7a7a7a;
  --base-40: #626262;
  --base-30: #4b4b4b;
  --base-20: #353535;
  --base-10: #1c1c1c;
  --base-0: #0a0a0a;
  --base-inverted: #000;

  // Accent colors
  --accent-brand: #2eff7b;
  --accent-brand-darker: #00c548;
  --accent-brand-lighter: #8effb7;

  // Success
  --accent-success: var(--accent-brand);
  --accent-success-darker: var(--accent-brand-darker);
  --accent-success-lighter: var(--accent-brand-lighter);

  // 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(--accent-brand);
  --body-color-inverted: var(--base-inverted);

  // Main content containers
  --card-bg: var(--base-inverted);
  --card-color: var(--accent-brand);
  --card-color-secondary: var(--accent-brand-darker);
  --card-color-tertiary: var(--base-50);
  --card-secondary-bg: var(--base-10);
  --card-secondary-color: var(--base-90);
  --card-headline-color: var(--accent-brand-lighter);

  // Header
  --header-bg: var(--base-10);
  --header-bg-hover: var(--base-20);
  --header-bg-current: var(--base-0);
  --header-shadow: rgba(0, 0, 0, 0.1);
  --header-icons-color: var(--base-70);
  --header-icons-color-hover: var(--base-100);

  // Logo
  --logo-bg: var(--accent-brand);
  --logo-color: #0a0a0a;

  // Footer
  --footer-bg: var(--base-10);
  --footer-copy-color: var(--base-80);
  --footer-copy-secondary-color: var(--base-60);
  --footer-link-color: var(--accent-brand);
  --footer-link-color-hover: var(--accent-brand-lighter);

  // Links
  --link-color: var(--accent-brand);
  --link-color-hover: var(--accent-brand-darker); // #ff53d9;
  --link-color-current: var(--accent-brand-lighter);
  --link-color-secondary: var(--accent-brand-darker);
  --link-color-secondary-hover: var(--accent-brand-darker);
  --link-brand-color: #e24ec1;
  --link-bg-hover: var(--base-0);
  --link-bg-hover-alt: var(--base-0);
  --link-bg-current: var(--base-inverted);

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

  // Secondary buttons
  --button-secondary-bg: var(--base-10);
  --button-secondary-bg-hover: var(--base-20);
  --button-secondary-color: var(--accent-brand);
  --button-secondary-color-hover: var(--accent-brand-lighter);
  //-- Inverted
  --button-secondary-inverted-bg: var(--base-50);
  --button-secondary-inverted-bg-hover: var(--base-30);
  --button-secondary-inverted-color: var(--accent-brand);
  --button-secondary-inverted-color-hover: var(--accent-brand-lighter);

  // Outlined buttons
  --button-outlined-bg: transparent;
  --button-outlined-bg-hover: rgba(0, 0, 0, 0.035);
  --button-outlined-border: var(--accent-brand);
  --button-outlined-border-hover: var(--accent-brand-darker);
  --button-outlined-color: var(--accent-brand);
  --button-outlined-color-hover: var(--accent-brand-darker);
  //-- Inverted
  --button-outlined-inverted-bg: transparent;
  --button-outlined-inverted-bg-hover: rgba(255, 255, 255, 0.15);
  --button-outlined-inverted-border: var(--accent-brand-darker);
  --button-outlined-inverted-border-hover: var(--accent-brand);
  --button-outlined-inverted-color: var(--accent-brand-darker);
  --button-outlined-inverted-color-hover: var(--accent-brand-darker);

  // Ghost buttons
  --button-ghost-bg: transparent;
  --button-ghost-bg-hover: rgba(0, 0, 0, 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(255, 255, 255, 0.15);
  --button-ghost-inverted-color: var(--base-30);
  --button-ghost-inverted-color-hover: var(--base-10);

  // Forms
  --form-bg: var(--base-0);
  --form-bg-focus: var(--base-inverted);
  --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(--accent-brand);
  --label-secondary: var(--accent-brand-darker);

  // Default box
  --box: var(--base-90);
  --box-darker: var(--base-100);

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