:root {

  --mocaverse-air-logo: url("mocaverse.svg");

  --mocaverse-air-text-primary-color: #FFFFFF;
  --mocaverse-air-text-secondary-color: #B0B0B0;
  --mocaverse-air-text-placeholder-color: #B8CAD4;
  --mocaverse-air-text-disabled-color: #FFFFFF40;
  --mocaverse-air-text-inverse-color: #000000;
  --mocaverse-air-text-on-color: #FFFFFF;

  --mocaverse-air-button-primary-color: #FF49A0;
  --mocaverse-air-button-primary-hover-color: #000000;
  --mocaverse-air-button-secondary-color: #2450EE;
  --mocaverse-air-button-secondary-hover-color: #FFFFFF;
  --mocaverse-air-button-disabled-color: #3A3A3A;
  --mocaverse-air-button-outlined-color: #FFFFFF;
  --mocaverse-air-button-outlined-hover-color: #FFFFFF14;
  --mocaverse-air-button-outlined-secondary-color: #4E4150;
  --mocaverse-air-button-outlined-secondary-hover-color: #FFFFFF14;

  --mocaverse-air-border-color: #FFFFFF40;
  --mocaverse-air-border-focus-color: #FFFFFF;

  --mocaverse-air-link-color: #3C8CFF;
  --mocaverse-air-text-button-color: #EF6ABA;

  --mocaverse-air-icon-primary-color: #FFFFFF;
  --mocaverse-air-icon-secondary-color: #B0B0B0;
  --mocaverse-air-icon-hover-color: #000000;
  --mocaverse-air-icon-disabled-color: #00000040;

  --mocaverse-air-status-success-color: #74FFCD;
  --mocaverse-air-status-error-color: #FF49A0;
  --mocaverse-air-status-pending-color: #F99247;

  --mocaverse-air-surface-color: #110A17;
  --mocaverse-air-surface-dim-color: #343A3B;

  --mocaverse-air-overlay-color: #00000080;

  --mocaverse-air-container-primary-color: #1D1D1D;
  --mocaverse-air-container-secondary-color: #2F2F2F;

  --mocaverse-air-decorative-color: #EF6ABA;
  --mocaverse-air-decoratibe-pink-color: #EF6ABA;
  --mocaverse-air-decorative-pink-5-color: #FFEDF9;
  --mocaverse-air-secondary-5-color: #FFFFFF;

  --mocaverse-air-background-color: linear-gradient(90deg, #202734 0.5%, #3C253C 100.5%);
}

html,
html[theme='mocaverse'] {
  --air-text-primary-color: var(--mocaverse-air-text-primary-color);
  --air-text-secondary-color: var(--mocaverse-air-text-secondary-color);
  --air-text-placeholder-color: var(--mocaverse-air-text-placeholder-color);
  --air-text-disabled-color: var(--mocaverse-air-text-disabled-color);
  --air-text-inverse-color: var(--mocaverse-air-text-inverse-color);
  --air-text-on-color: var(--mocaverse-air-text-on-color);

  --air-button-primary-color: var(--mocaverse-air-button-primary-color);
  --air-button-primary-hover-color: var(--mocaverse-air-button-primary-hover-color);
  --air-button-secondary-color: var(--mocaverse-air-button-secondary-color);
  --air-button-secondary-hover-color: var(--mocaverse-air-button-secondary-hover-color);
  --air-button-disabled-color: var(--mocaverse-air-button-disabled-color);
  --air-button-outlined-color: var(--mocaverse-air-button-outlined-color);
  --air-button-outlined-hover-color: var(--mocaverse-air-button-outlined-hover-color);
  --air-button-outlined-secondary-color: var(--mocaverse-air-button-outlined-secondary-color);
  --air-button-outlined-secondary-hover-color: var(--mocaverse-air-button-outlined-secondary-hover-color);

  --air-border-color: var(--mocaverse-air-border-color);
  --air-border-focus-color: var(--mocaverse-air-border-focus-color);

  --air-link-color: var(--mocaverse-air-link-color);
  --air-text-button-color: var(--mocaverse-air-text-button-color);

  --air-icon-primary-color: var(--mocaverse-air-icon-primary-color);
  --air-icon-secondary-color: var(--mocaverse-air-icon-secondary-color);
  --air-icon-hover-color: var(--mocaverse-air-icon-hover-color);
  --air-icon-disabled-color: var(--mocaverse-air-icon-disabled-color);

  --air-status-success-color: var(--mocaverse-air-status-success-color);
  --air-status-pending-color: var(--mocaverse-air-status-pending-color);
  --air-status-error-color: var(--mocaverse-air-status-error-color);

  --air-surface-color: var(--mocaverse-air-surface-color);
  --air-surface-dim-color: var(--mocaverse-air-surface-dim-color);

  --air-overlay-color: var(--mocaverse-air-overlay-color);

  --air-container-primary-color: var(--mocaverse-air-container-primary-color);
  --air-container-secondary-color: var(--mocaverse-air-container-secondary-color);

  --air-decorative-color: var(--mocaverse-air-decorative-color);
  --air-secondary-5-color: var(--mocaverse-air-secondary-5-color);

  /* Below expose additional variables for partners to overwrite theme */
  --air-logo: var(--mocaverse-air-logo);
  --air-background-color: var(--mocaverse-air-background-color);
}