body {
  --white: #ffffff;
  --gray-10: #f4f5f6;
  --gray-20: #ebeced;
  --gray-30: #dee0e2;
  --gray-40: #d2d4d7;
  --gray-50: #b3b5b7;
  --gray-60: #939597;
  --gray-70: #737577;
  --gray-80: #535557;
  --gray-90: #333537;
  --gray-100: #212325;
  --black: #131517;
  --white-transparent: #ffffff00;
  --gray-10-transparent: #f4f5f600;
  --gray-20-transparent: #ebeced00;
  --gray-30-transparent: #dee0e200;
  --gray-40-transparent: #d2d4d700;
  --gray-50-transparent: #b3b5b700;
  --gray-80-transparent: #53555700;
  --gray-90-transparent: #33353700;
  --gray-100-transparent: #21232500;
  --black-transparent: #13151700;
  --gray-20-translucent: #eaecee40;
  --white-translucent: #ffffff40;
  --white-thick-translucent: #fffc;
  --black-translucent: #13151740;
  --black-thick-translucent: #131517cc;
  --darker-pale-gray: #93959744;
  --pale-gray: #93959722;
  --faint-gray: #93959711;
  --pale-white: #fff2;

  --half-white: #fff9;
  --half-gray: #b3b5b799;
  --half-black: #0009;

  --cranberry-10: #fbe5eb;
  --cranberry-20: #f7cbd8;
  --cranberry-30: #ee98b1;
  --cranberry-40: #e6658a;
  --cranberry-50: #de3163;
  --cranberry-60: #c22b57;
  --cranberry-70: #8b1f3e;
  --cranberry-80: #531225;
  --pale-cranberry: #de316322;
  --faint-cranberry: #de316311;

  --barney-10: #f6e5f8;
  --barney-20: #eecaf1;
  --barney-30: #dd96e3;
  --barney-40: #cc62d5;
  --barney-50: #bb2dc7;
  --barney-60: #a427ae;
  --barney-70: #751c7c;
  --barney-80: #46114b;
  --pale-barney: #bb2dc722;
  --faint-barney: #bb2dc711;

  --purple-10: #e3defd;
  --purple-20: #d4c4ff;
  --purple-30: #b596ff;
  --purple-40: #7b49ff;
  --purple-50: #682fff;
  --purple-60: #5b29df;
  --purple-70: #4b23bf;
  --purple-80: #2f1880;
  --pale-purple: #682fff22;
  --faint-purple: #682fff11;

  --blue-10: #d4e5ff;
  --blue-20: #b6d3ff;
  --blue-30: #76adff;
  --blue-40: #3787ff;
  --blue-50: #325ffa;
  --blue-60: #2c53db;
  --blue-70: #1f3b9c;
  --blue-80: #13245e;
  --pale-blue: #325ffa22;
  --faint-blue: #325ffa11;

  --green-10: #d4f2e1;
  --green-20: #a3e4bf;
  --green-30: #75d79e;
  --green-40: #47c97e;
  --green-50: #07a460;
  --green-60: #078c53;
  --green-70: #067847;
  --green-80: #045030;
  --darker-pale-green: #07a46044;
  --pale-green: #07a46022;
  --faint-green: #07a46011;

  --yellow-10: #fff2cc;
  --yellow-20: #ffecb2;
  --yellow-30: #fde38f;
  --yellow-40: #fbd85b;
  --yellow-50: #facc28;
  --yellow-60: #d19d20;
  --yellow-70: #a56915;
  --yellow-80: #7f3e11;
  --pale-yellow: #d19d2022;
  --faint-yellow: #d19d2011;

  --orange-10: #ffecdb;
  --orange-20: #ffcba0;
  --orange-30: #ffb071;
  --orange-40: #ff9641;
  --orange-50: #ec660d;
  --orange-60: #cf590b;
  --orange-70: #b14d0a;
  --orange-80: #763307;
  --pale-orange: #ec660d22;
  --faint-orange: #ec660d11;

  --red-10: #ffe5e7;
  --red-20: #ffc1c5;
  --red-30: #ff838c;
  --red-40: #ff5965;
  --red-50: #e83b47;
  --red-60: #cb343e;
  --red-70: #98272f;
  --red-80: #5b171b;
  --pale-red: #e83b4722;
  --faint-red: #e83b4711;

  --calendar-red: #d86156;

  --opacity-0: rgba(21, 21, 23, 0);
  --opacity-8: rgba(21, 21, 23, 0.1);
  --opacity-16: rgba(21, 21, 23, 0.16);
  --opacity-24: rgba(21, 21, 23, 0.24);
  --opacity-48: rgba(21, 21, 23, 0.4);
  --opacity-64: rgba(21, 21, 23, 0.64);
  --opacity-80: rgba(21, 21, 23, 0.8);

  --default-gradient: linear-gradient(
    -45deg,
    #8a18a8 0%,
    #ce2756 51.59%,
    #cf2a55 51.6%,
    #e7a90d 100.05%
  );
}

body,
body.force-light,
.force-light,
body.dark.force-light {
  --gray: var(--gray-70);
  --cranberry: var(--cranberry-50);
  --barney: var(--barney-50);
  --purple: var(--purple-50);
  --blue: var(--blue-50);
  --green: var(--green-50);
  --yellow: var(--yellow-60);
  --orange: var(--orange-50);
  --red: var(--red-50);

  --brand-color: var(--cranberry-50);
  --brand-active-color: var(--cranberry-60);
  --brand-pale-bg-color: var(--pale-cranberry);
  --brand-faint-bg-color: var(--faint-cranberry);

  .theme-cranberry {
    --brand-color: var(--cranberry-50);
    --brand-active-color: var(--cranberry-60);
    --brand-pale-bg-color: var(--pale-cranberry);
  }

  .theme-yellow {
    --brand-color: var(--yellow-60);
    --brand-active-color: var(--yellow-70);
    --brand-pale-bg-color: var(--pale-yellow);
  }

  .theme-orange {
    --brand-color: var(--orange-50);
    --brand-active-color: var(--orange-60);
    --brand-pale-bg-color: var(--pale-orange);
  }

  .theme-red {
    --brand-color: var(--red-50);
    --brand-active-color: var(--red-60);
    --brand-pale-bg-color: var(--pale-red);
  }

  .theme-green {
    --brand-color: var(--green-50);
    --brand-active-color: var(--green-60);
    --brand-pale-bg-color: var(--pale-green);
  }

  .theme-blue {
    --brand-color: var(--blue-50);
    --brand-active-color: var(--blue-60);
    --brand-pale-bg-color: var(--pale-blue);
  }

  .theme-purple {
    --brand-color: var(--purple-50);
    --brand-active-color: var(--purple-60);
    --brand-pale-bg-color: var(--pale-purple);
  }

  .theme-barney {
    --brand-color: var(--barney-50);
    --brand-active-color: var(--barney-60);
    --brand-pale-bg-color: var(--pale-barney);
  }

  .theme-gray {
    --brand-color: var(--gray-70);
    --brand-active-color: var(--gray-50);
    --brand-pale-bg-color: var(--pale-gray);
  }

  --success-color: var(--green-50);
  --success-active-color: var(--green-60);
  --success-pale-bg-color: var(--pale-green);
  --error-color: var(--red-50);
  --error-active-color: var(--red-60);
  --error-pale-bg-color: var(--pale-red);
  --warning-color: var(--yellow-60);
  --warning-active-color: var(--yellow-70);
  --warning-pale-bg-color: var(--pale-yellow);

  --primary-color: var(--black);
  --secondary-color: var(--gray-70);
  --tertiary-color: var(--gray-50);
  --quaternary-color: var(--gray-30);

  --primary-bg-color: var(--white);
  --primary-bg-color-transparent: var(--white-transparent);
  --secondary-bg-color: var(--gray-10);
  --secondary-bg-color-transparent: var(--gray-10-transparent);
  --tertiary-bg-color: var(--gray-20);
  --quaternary-bg-color: var(--gray-30);

  --elevated-primary-bg-color: var(--primary-bg-color);
  --elevated-secondary-bg-color: var(--secondary-bg-color);
  --elevated-tertiary-bg-color: var(--tertiary-bg-color);

  --primary-border-color: var(--gray-40);
  --secondary-border-color: var(--gray-20);
  --active-border-color: var(--black);

  --primary-divider-color: var(--gray-90);
  --secondary-divider-color: var(--gray-50);
  --tertiary-divider-color: var(--gray-20);
  --primary-divider-color-transparent: var(--gray-90-transparent);
  --secondary-divider-color-transparent: var(--gray-50-transparent);
  --tertiary-divider-color-transparent: var(--gray-20-transparent);

  --overlay-color: var(--half-gray);

  --divider-color: var(--tertiary-divider-color);
  --gradient-divider: linear-gradient(
    to right,
    var(--tertiary-divider-color-transparent),
    var(--tertiary-divider-color) 50%,
    var(--tertiary-divider-color-transparent)
  );

  --hover-bg-color: var(--pale-gray);
  --disabled-bg-color: var(--gray-20);
  --disabled-bg-color-translucent: var(--gray-20-translucent);

  --nprogress-color: var(--brand-color);
  --toast-default-color: var(--primary-bg-color);

  // used by value in favicon.ts when rendering red dot on the favicon
  --unread-badge-bg-color: var(--red-50);

  // Used on the community map
  --map-tooltip-shadow: 0 6px 16px rgba(30, 53, 77, 0.5);
  --map-tooltip-bg-color: #fff9;

  // Used on the lu.ma/home dashboard
  --banner-color: var(--secondary-color);
  --banner-bg-color: var(--input-group-bg-color);
  --banner-border-color: var(--input-border-color);

  // Used for event calendar cards
  --event-calendar-border-color: var(--tertiary-bg-color);
  --event-calendar-bg-color: var(--primary-bg-color);
  --event-calendar-month-color: var(--tertiary-color);
  --event-calendar-month-bg-color: var(--tertiary-bg-color);
}

body.dark,
body.force-dark,
.force-dark,
body.light.force-dark {
  --gray: var(--gray-40);
  --cranberry: var(--cranberry-40);
  --barney: var(--barney-40);
  --purple: var(--purple-30);
  --blue: var(--blue-40);
  --green: var(--green-40);
  --yellow: var(--yellow-40);
  --orange: var(--orange-40);
  --red: var(--red-40);

  --brand-color: var(--cranberry-40);
  --brand-active-color: var(--cranberry-50);

  --default-gradient: linear-gradient(
    -45deg,
    #d118ff 0%,
    #f32861 51.59%,
    #f8245d 51.6%,
    #ffbe19 100.05%
  );

  .theme-cranberry {
    --brand-color: var(--cranberry-40);
    --brand-active-color: var(--cranberry-50);
  }

  .theme-yellow {
    --brand-color: var(--yellow-50);
    --brand-active-color: var(--yellow-60);
  }

  .theme-orange {
    --brand-color: var(--orange-40);
    --brand-active-color: var(--orange-50);
  }

  .theme-red {
    --brand-color: var(--red-40);
    --brand-active-color: var(--red-50);
  }

  .theme-green {
    --brand-color: var(--green-40);
    --brand-active-color: var(--green-50);
  }

  .theme-blue {
    --brand-color: var(--blue-40);
    --brand-active-color: var(--blue-50);
  }

  .theme-purple {
    --brand-color: var(--purple-40);
    --brand-active-color: var(--purple-50);
  }

  .theme-barney {
    --brand-color: var(--barney-40);
    --brand-active-color: var(--barney-50);
  }

  .theme-gray {
    --brand-color: var(--gray-40);
    --brand-active-color: var(--gray-50);
  }

  --success-color: var(--green-50);
  --success-active-color: var(--green-60);
  --error-color: var(--red-50);
  --error-active-color: var(--red-60);
  --warning-color: var(--yellow-50);
  --warning-active-color: var(--yellow-60);

  --primary-color: var(--white);
  --secondary-color: var(--gray-40);
  --tertiary-color: var(--gray-60);
  --quaternary-color: var(--gray-80);

  --primary-bg-color: var(--black);
  --primary-bg-color-transparent: var(--black-transparent);
  --secondary-bg-color: var(--gray-100);
  --secondary-bg-color-transparent: var(--gray-100-transparent);
  --tertiary-bg-color: var(--gray-90);
  --quaternary-bg-color: var(--gray-80);

  --elevated-primary-bg-color: var(--secondary-bg-color);
  --elevated-secondary-bg-color: var(--tertiary-bg-color);
  --elevated-tertiary-bg-color: var(--quaternary-bg-color);

  --primary-border-color: var(--gray-60);
  --secondary-border-color: var(--gray-90);
  --active-border-color: var(--white);

  --primary-divider-color: var(--gray-10);
  --secondary-divider-color: var(--gray-60);
  --tertiary-divider-color: var(--gray-90);
  --primary-divider-color-transparent: var(--gray-10-transparent);
  --secondary-divider-color-transparent: var(--gray-60-transparent);
  --tertiary-divider-color-transparent: var(--gray-100-transparent);

  --overlay-color: var(--half-black);

  --hover-bg-color: var(--pale-gray);
  --disabled-bg-color: var(--gray-80);
  --disabled-bg-color-translucent: var(--gray-80-translucent);

  --unread-badge-bg-color: var(--red-40);

  --map-tooltip-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
  --map-tooltip-bg-color: #0009;
}