:root {
  --theme-secondary-color: #4e57ef;
  --theme-container-background: #fff;
  --theme-container-accent-background: #ffccdb;
  --theme-container-background-hover: #ffe5eb;
  --theme-container-box-shadow: none;
  --theme-container-border: 1px solid #ff4983;

  // Base
  --base-100: #000000;
  --base-90: #330f1a;
  --base-80: #57192d;
  --base-70: #7d2440;
  --base-60: #a52f55;
  --base-50: #cf3b6b;
  --base-40: #fb4881;
  --base-30: #ff7da6;
  --base-20: #ffa9c4;
  --base-10: #ffd1df;
  --base-0: #fff7f9;
  --base-inverted: #fff;

  // Accent colors
  --accent-brand: #ff6c9b;
  --accent-brand-darker: #f03e76;
  --accent-brand-lighter: #ff99b9;

  // Success
  --accent-success: #71db92;
  --accent-success-darker: #5abf79;
  --accent-success-lighter: #93edaf;

  // 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: #0a0a0a;
  --body-color-inverted: var(--base-inverted);

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

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

  // Logo
  --logo-bg: var(--base-inverted);
  --logo-color: var(--header-bg);

  // 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(--base-70);
  --link-color-current: var(--base-100);
  --link-color-secondary: var(--base-70);
  --link-color-secondary-hover: var(--base-80);
  --link-brand-color: #4e57ef;
  --link-bg-hover: var(--base-0);
  --link-bg-hover-alt: var(--base-inverted);
  --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(--accent-brand);
  --button-primary-inverted-bg-hover: var(--accent-brand-darker);
  --button-primary-inverted-color: var(--base-0);
  --button-primary-inverted-color-hover: var(--base-0);

  // Secondary buttons
  --button-secondary-bg: var(--base-10);
  --button-secondary-bg-hover: var(--base-20);
  --button-secondary-color: var(--base-70);
  --button-secondary-color-hover: var(--base-90);
  //-- Inverted
  --button-secondary-inverted-bg: var(--base-60);
  --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(0, 0, 0, 0.035);
  --button-outlined-border: var(--base-20);
  --button-outlined-border-hover: var(--base-40);
  --button-outlined-color: var(--base-70);
  --button-outlined-color-hover: var(--base-90);
  //-- Inverted
  --button-outlined-inverted-bg: transparent;
  --button-outlined-inverted-bg-hover: rgba(255, 255, 255, 0.15);
  --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(0, 0, 0, 0.035);
  --button-ghost-color: var(--base-90);
  --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: #fff7f9;
  --form-bg-focus: var(--base-0);
  --form-border: var(--base-50);
  --form-border-hover: var(--base-60);
  --form-border-focus: var(--base-60);
  --form-placeholder-color: var(--base-60);

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

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

  // Indicators
  --indicator-accent-bg: var(--link-brand-color);
  --indicator-accent-color: var(--body-color-inverted);
  --indicator-critical-bg: var(--base-80);
  --indicator-critical-color: var(--body-color-inverted);
  --indicator-dimmed-bg: var(--base-30);
  --indicator-dimmed-color: var(--base-70);
}
