:root{
  /* =====================================================
     REBRANDMAGIC PROJECT VISUAL IDENTITY

     Project appearance belongs here.
     Shared component construction, dimensions, behaviour,
     functional alerts, plans and status systems belong
     in ui.css.
     ===================================================== */

  /* BACKGROUND COLOR NAMES */
  --ui-bg-black:#000102;
  --ui-bg-gradient-light:#043A4C;
  --ui-bg-gradient-dark:#010302;

  /* PROJECT COLOR SET */
  --ui-green:#10C012;
  --ui-gold:#AE8610;
  --ui-mulberry:#915C83;
  --ui-blue-mana:#63c3f2;
  --ui-grey:#2d2c2d;
  --ui-teal:#00A896;
  --ui-cobalite:#9a94f5;
  --ui-periwinkle:#B8C8FD;
  --ui-coal-mine:#220230;
  --ui-scoop-of-dark-matter:#0f0250;

  /* BACKGROUND / ATMOSPHERE */
  --ui-bg-base:var(--ui-bg-black);
  --ui-panel-bg-light:var(--ui-bg-gradient-light);
  --ui-panel-bg-dark:var(--ui-bg-gradient-dark);

  /* TYPOGRAPHY COLOR ASSIGNMENTS */
  --ui-title-color:var(--ui-gold);
  --ui-main-color:var(--ui-gold);
  --ui-popup-title-color:var(--ui-periwinkle);
  --ui-sub-1-color:var(--ui-periwinkle);
  --ui-sub-2-color:var(--ui-teal);
  --ui-sub-3-color:var(--ui-periwinkle);
  --ui-sub-4-color:var(--ui-periwinkle);
  --ui-sub-5-color:var(--ui-gold);
  --ui-body-1-color:var(--ui-periwinkle);
  --ui-body-2-color:var(--ui-gold);
  --ui-body-3-color:var(--ui-periwinkle);
  --ui-body-4-color:var(--ui-periwinkle);

  /* LINKS */
  --ui-link-color:var(--ui-gold);
  --ui-link-hover-color:#E6A725;
  --ui-link-press-feedback-color:var(--ui-teal);

  /* BUTTONS */
  --ui-btn-bg:var(--ui-teal);
  --ui-btn-hover-bg:var(--ui-gold);
  --ui-btn-text-color:#E7ECFD;
  --ui-btn-press-feedback-color:var(--ui-periwinkle);

  /* BORDERS / DIVIDERS */
  --ui-border-1-color:var(--ui-periwinkle);
  --ui-border-2-color:var(--ui-grey);
  --ui-divider-1-color:var(--ui-periwinkle);
  --ui-divider-2-color:var(--ui-grey);
  --ui-border-color:var(--ui-border-1-color);
  --ui-divider-color:var(--ui-divider-1-color);

  /* INPUTS */
  --ui-input-border-color:var(--ui-border-color);
  --ui-input-text-color:#222;
  --ui-input-bg-color:#fff;

  /* POPUPS / SURFACES */
  --ui-popup-bg:var(--ui-coal-mine);
  --ui-popup-close-color:var(--ui-gold);

  /* BUBBLES */
  --ui-bubble-bg:var(--ui-teal);
  --ui-bubble-border:var(--ui-periwinkle);
  --ui-bubble-text:var(--ui-periwinkle);

  /* CHIP INTERACTION */
  --ui-chip-press-feedback-color:var(--ui-mulberry);

  /* SOURCE / SELECTION ACCENTS */
  --ui-source-file-accent:var(--ui-gold);
  --ui-selected-row-accent:var(--ui-gold);

  /* PRICING CARD APPEARANCE */
  --ui-price-card-bg-light:var(--ui-panel-bg-light);
  --ui-price-card-bg-dark:var(--ui-panel-bg-dark);
  --ui-price-card-border-color:var(--ui-border-2-color);
  --ui-price-card-divider-color:var(--ui-divider-2-color);
}


/* =====================================================
   REBRANDMAGIC PROJECT COLOR HELPERS
   ===================================================== */

.ui-green{ color:var(--ui-green); }
.ui-gold{ color:var(--ui-gold); }
.ui-mulberry{ color:var(--ui-mulberry); }
.ui-blue-mana{ color:var(--ui-blue-mana); }
.ui-grey{ color:var(--ui-grey); }
.ui-teal{ color:var(--ui-teal); }
.ui-cobalite{ color:var(--ui-cobalite); }
.ui-periwinkle{ color:var(--ui-periwinkle); }
.ui-coal-mine{ color:var(--ui-coal-mine); }
.ui-scoop-of-dark-matter{ color:var(--ui-scoop-of-dark-matter); }