:root {
  --general-color: white;
  --text-color: white;
  --secondary-text-color: #878d94;
  --active-color: white;
  --font-family-buttons: 'Aeonik Pro Medium', sans-serif;
  --font-family-header: 'Aeonik Pro Medium', sans-serif;

  --nav-text: #878d94;
  --nav-text-active: #1b2735;

  --content-background: #0f1c2a;
  --page-background: #071423;

  --button-main: #19ae82;
  --button-main-hover: #17946e;
  --button-main-active: #1db98933;

  --error-color: #ee453a;
  --neutral-color: #878d94;
  --active-color: #ffffff;

  --error-background: #ee453a30;
  --warning-background: #ffcd0030;

  --item-hover: rgba(0, 0, 0, 0.3);
  --border-radius: 8px;
  --border-radius-content: 24px;
  --border-width: 1px;
  --border-color: #27333f;
  --border-color-hover: var(--neutral-color);
  --border-color-focus: var(--active-color);
  --border-color-error: var(--error-color);

  --button-secondary: transparent;
  --button-secondary-border: var(--border-width) solid var(--border-color);
  --button-secondary-hover: transparent;
  --button-secondary-border-hover: var(--border-width) solid
    var(--neutral-color);
  --button-secondary-active: transparent;

  --font-size-normal: 16px;
  --line-height-normal: 22px;
  --spacing-normal: 8px;

  --font-size-small: 14px;
  --line-height-small: 20px;
  --spacing-small: 6px;

  --font-size-medium: 16px;
  --line-height-medium: 22px;
  --spacing-medium: 8px;

  --font-size-large: 20px;
  --line-height-large: 28px;
  --spacing-large: 12px;

  --font-size-xlarge: 24px;
  --line-height-xlarge: 32px;
  --spacing-xlarge: 32px;
}

[data-theme='light'] {
  --general-color: white;
  --text-color: #47464e;
  --secondary-text-color: #878d94;
  --active-color: white;

  --nav-text: #878d94;
  --nav-text-active: #1b2735;

  --content-background: #fff;
  --page-background: #f8f7f7;

  --item-hover: rgba(0, 0, 0, 0.3);
  --border-radius: 8px;
  --border-radius-content: 24px;
  --border-width: 1px;
  --border-color: #edeced;
  --border-color-hover: var(--neutral-color);
  --border-color-focus: var(--active-color);
  --border-color-error: var(--error-color);

  --button-secondary: transparent;
  --button-secondary-border: var(--border-width) solid var(--border-color);
  --button-secondary-hover: transparent;
  --button-secondary-border-hover: var(--border-width) solid
    var(--neutral-color);
  --button-secondary-active: transparent;

  --font-size-normal: 16px;
  --line-height-normal: 22px;
  --spacing-normal: 8px;

  --font-size-small: 14px;
  --line-height-small: 20px;
  --spacing-small: 6px;

  --font-size-medium: 16px;
  --line-height-medium: 22px;
  --spacing-medium: 8px;

  --font-size-large: 20px;
  --line-height-large: 28px;
  --spacing-large: 12px;

  --font-size-xlarge: 24px;
  --line-height-xlarge: 32px;
  --spacing-xlarge: 32px;
}

[data-theme='dark'] {
  --general-color: white;
  --text-color: white;
  --secondary-text-color: #878d94;
  --active-color: white;

  --nav-text: #878d94;
  --nav-text-active: #1b2735;

  --content-background: #0f1c2a;
  --page-background: #071423;

  --item-hover: rgba(0, 0, 0, 0.3);
  --border-radius: 8px;
  --border-radius-content: 24px;
  --border-width: 1px;
  --border-color: #27333f;
  --border-color-hover: var(--neutral-color);
  --border-color-focus: var(--active-color);
  --border-color-error: var(--error-color);

  --button-secondary: transparent;
  --button-secondary-border: var(--border-width) solid var(--border-color);
  --button-secondary-hover: transparent;
  --button-secondary-border-hover: var(--border-width) solid
    var(--neutral-color);
  --button-secondary-active: transparent;

  --font-size-normal: 16px;
  --line-height-normal: 22px;
  --spacing-normal: 8px;

  --font-size-small: 14px;
  --line-height-small: 20px;
  --spacing-small: 6px;

  --font-size-medium: 16px;
  --line-height-medium: 22px;
  --spacing-medium: 8px;

  --font-size-large: 20px;
  --line-height-large: 28px;
  --spacing-large: 12px;

  --font-size-xlarge: 24px;
  --line-height-xlarge: 32px;
  --spacing-xlarge: 32px;
}

body {
  margin: 0;
  font-family: 'Aeonik Pro Regular', sans-serif, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
    'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 30px 24px 34px !important;
  min-width: 260px;
}