:root {
    --arrow-color: #000;
    --bg-color: white;
    --bg-color-translucent: rgba(255, 255, 255, 0.75);
    --bookmark-button-unsaved-border: 1px solid #fff;
    --bookmark-button-unsaved-border-hover: 1px solid var(--ode-blue);
    --bookmark-button-unsaved-icon: url("https://ode.fm/images/heart.png");
    --bookmark-button-saved-icon: url("https://ode.fm/images/heart_hover.png");
    --bookmark-button-unsaved-icon-white: url("https://ode.fm/images/heart_dark.png");
    --calendar-button: url("https://ode.fm/images/calendar_light.png");
    --category-box-text: #000;
    --category-box-text-hover: #000;
    --category-button-background: transparent;
    --category-button-background-hover: #fff;
    --category-button-border: 1px solid #fff;
    --category-button-border-hover: 1px solid #fff;
    --category-button-text: #fff;
    --category-button-text-hover: #000;
    --category-event-background: transparent;
    --category-event-background-hover: #000;
    --category-event-border: 1px solid #000;
    --category-event-border-hover: 1px solid #000;
    --category-event-text: #000;
    --category-event-text-hover: #fff;
    --checkmark-follow-color: #000;
    --checkmark-following-color: #fff;
    --content-side-padding: 15px;
    --custom-scrollbar-thumb: #000;
    --custom-scrollbar-track: #c2c2c2;
    --desktop-header-blur: blur(12px);
    --event-block-date: #707070;
    --event-block-date-hover: #000;
    --event-block-desc: #707070;
    --event-block-desc-hover: #000;
    --event-block-gutter: 15px;
    --event-card-bg: #fff;
    --event-card-border-radius: 45px;
    --event-card-border-radius-inset: 35px;
    --event-card-border-radius-inset-responsive: 25px;
    --event-card-browse-grid-border-radius-desktop: 45px;
    --event-card-browse-grid-border-radius-responsive: 30px;
    --event-card-browse-grid-padding-desktop: 10px;
    --event-card-browse-grid-padding-responsive: 5px;
    --event-card-ease: cubic-bezier(0.19, 0.55, 0.32, 1);
    --event-ai-summary-border-radius: 30px;
    --event-ai-summary-border-radius-responsive: 25px;
    --event-ai-summary-padding: 20px;
    --event-ai-summary-padding-responsive: 15px;
    --event-card-individual-padding: 10px;
    --event-card-individual-padding-responsive: 10px;
    --event-card-outline: 1px solid rgba(0, 0, 0, 0.2);
    --event-card-padding-desktop: 10px;
    --event-card-shadow:
        inset 0 0 0 0px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.05),
        0 6px 12px rgba(0, 0, 0, 0.04);
    --event-card-shadow-hover:
        inset 0 0 0 0px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.08),
        0 5px 10px rgba(0, 0, 0, 0.1), 0 10px 18px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(0, 0, 0, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.06);
    --event-fade-overlay: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0) 50%,
        rgba(255, 255, 255, 0.4) 68%,
        rgba(255, 255, 255, 0.75) 82%,
        rgba(255, 255, 255, 0.95) 92%,
        #ffffff 100%
    );
    --event-fade-overlay-map: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0) 35%,
        rgba(255, 255, 255, 0.2) 55%,
        rgba(255, 255, 255, 0.5) 70%,
        rgba(255, 255, 255, 0.75) 82%,
        rgba(255, 255, 255, 0.92) 92%,
        #ffffff 100%
    );
    --event-card-shadow-hover-browse:
        inset 0 0 0 0px rgba(0, 0, 0, 0.05), inset 0 0 0px rgba(0, 0, 0, 0.025),
        0 1px 3px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.1),
        0 8px 12px rgba(0, 0, 0, 0.06);
    --event-image-border: none;
    --event-image-glow: none;
    --event-image-glow-responsive: none;
    --explore-link-hover: var(--ode-blue);
    --export-button: url("https://ode.fm/images/share_light.png");
    --footer-header-weight: 550;
    --gap-col-desktop: 10px;
    --gap-col-responsive: 10px;
    --gap-row-desktop: 15px;
    --gap-row-responsive: 15px;
    --general-divider: 1px solid #e0e0e0;
    --hero-slider-accent: #666;
    --hero-slider-background: #f2f2f2;
    --hero-slider-button-background: #000;
    --hero-slider-button-outline: #000;
    --hero-slider-button-text: #fff;
    --hero-slider-title: #000;
    --link-text-hover: var(--ode-blue);
    --list-event-hover: #f7f7f7;
    --location-icon: url("https://ode.fm/images/location_light.png");
    --location-overlay-background: rgba(255, 255, 255, 0.5);
    --login-button-background: #fff;
    --login-button-outline: #000;
    --login-button-text: #000;
    --logo-color: black;
    --registration-arrow-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 20 20'%3E%3Cpolygon points='0,0 20,0 10,10' fill='%23000000'/%3E%3C/svg%3E");
    --auth-card-bg: #ffffff;
    --auth-card-border: 1px solid rgba(0, 0, 0, 0.05);
    --auth-card-shadow: 0 30px 45px rgba(15, 15, 15, 0.08);
    --auth-card-text: #000;
    --auth-input-bg: #ffffff;
    --auth-input-border: 1px solid #c2c2c2;
    --auth-input-text: #000;
    --auth-input-placeholder: #8e97a1;
    --auth-select-placeholder: #c2c2c2;
    --auth-checkbox-border: #c2c2c2;
    --main-text-color: #000;
    --menu-color: black;
    --mobile-nav-menu-line-height: 1.3;
    --mobile-nav-menu-size: 17px;
    --ode-blue: #0004f5;
    --ode-blue-offset: #292cff;
    --ode-body: "Hanken Grotesk", sans-serif;
    --ode-body-button: 450;
    --ode-body-description-line-height: 1.7;
    --ode-body-weight: 400;
    --ode-editorial: "Instrument Serif", serif;
    --ode-editorial-letter-spacing: -0.2px;
    --ode-event-block-title: "aktiv-grotesk-extended", sans-serif;
    --ode-event-block-title-letter-spacing: 0px;
    --ode-event-block-title-weight: 380;
    --ode-event-indvidual-font-size-desktop: 16px;
    --ode-event-indvidual-font-size-responsive: 14px;
    --ode-header: "aktiv-grotesk-extended", sans-serif;
    --ode-header-weight: 400;
    --organizer-follow-button-outline-set: 1px solid var(--ode-blue);
    --organizer-follow-button-outline-unset: 1px solid black;
    --organizer-instagram-icon-url: url("../images/instagram_light.svg");
    --organizer-pfp-outline: none;
    --organizer-region-icon-url: url("../images/region_light.svg");
    --organizer-website-icon-url: url("../images/website_light.svg");
    --profile-edit-button-background-hover: var(--ode-blue-offset);
    --profile-edit-button-outline: 1px solid var(--ode-blue);
    --profile-edit-button-outline-hover: 1px solid var(--ode-blue-offset);
    --profile-follow-button-outline: 1px solid var(--ode-blue);
    --profile-follow-button-outline-inactive: 1px solid black;
    --profile-tabs-track: 1px solid #e7e7e7;
    --purchase-button-background-hover: var(--ode-blue-offset);
    --purchase-button-outline: 1px solid var(--ode-blue);
    --purchase-button-outline-hover: 1px solid var(--ode-blue-offset);
    --search-blur: blur(12px);
    --search-border-colors: #c2c2c2;
    --search-header-mask-bg: rgba(0, 0, 0, 0.08);
    --search-text-hover: #ffffff;
    --search-text-placeholder: #8e97a1;
    --search-translucent: rgba(255, 255, 255, 0.5);
    --settings-button-background: var(--main-text-color);
    --settings-button-background-hover: var(--bg-color);
    --settings-button-outline: 1px solid var(--main-text-color);
    --settings-button-text: var(--bg-color);
    --settings-button-text-hover: var(--main-text-color);
    --signup-button-background: var(--ode-blue);
    --signup-button-outline: var(--ode-blue);
    --signup-button-text: #fff;
    --signup-forgot: var(--ode-blue);
    --useraccount-link-color: var(--ode-blue);
    --signup-hover: #000;
    --signup-outline: 1px solid black;
    --sort-arrow-svg: url("../images/sort-arrows.svg");
    --sub-text-color: #707070;
    --tag-box-shadow: 255, 255, 255, 1;
    --tag-button-background: #000;
    --tag-button-text: #fff;
    --top-nav-size: 17px;
    --universal-grey: rgba(0, 0, 0, 0.25);
    /* original --universal-grey: #c2c2c2; */
}

[data-theme="dark"] {
    --arrow-color: #fff;
    --bg-color: #0c0d0e;
    --bg-color-translucent: rgba(12, 13, 14, 0.75);
    --bookmark-button-unsaved-border: 1px solid #fff;
    --bookmark-button-unsaved-border-hover: 1px solid var(--ode-blue);
    --bookmark-button-unsaved-icon: url("https://ode.fm/images/heart_dark.png");
    --bookmark-button-saved-icon: url("https://ode.fm/images/heart_hover.png");
    --calendar-button: url("https://ode.fm/images/calendar_dark.png");
    --category-box-text: #fff;
    --category-box-text-hover: var(--link-text-hover);
    --category-button-background: transparent;
    --category-button-background-hover: #fff;
    --category-button-border: 1px solid #fff;
    --category-button-border-hover: 1px solid #fff;
    --category-button-text: #fff;
    --category-button-text-hover: #0c0d0e;
    --category-event-background: transparent;
    --category-event-background-hover: #fff;
    --category-event-border: 1px solid #fff;
    --category-event-border-hover: 1px solid #fff;
    --category-event-text: #fff;
    --category-event-text-hover: #0c0d0e;
    --checkmark-follow-color: #fff;
    --checkmark-following-color: #fff;
    --content-side-padding: 15px;
    --custom-scrollbar-thumb: #969797;
    --custom-scrollbar-track: #404040;
    --desktop-header-blur: blur(12px);
    --event-block-date: #8e97a1;
    --event-block-date-hover: #fff;
    --event-block-desc: #8e97a1;
    --event-block-desc-hover: #fff;
    --event-card-bg: rgba(25, 26, 27, 0.65);
    --event-card-outline: 1px solid rgba(255, 255, 255, 0.15);
    --event-card-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        0 2px 4px rgba(0, 0, 0, 0.28), 0 4px 12px rgba(0, 0, 0, 0.22),
        0 0 8px rgba(255, 255, 255, 0.01);
    --event-card-shadow-hover:
        inset 0 0 0 1px rgba(255, 255, 255, 0.15),
        inset 0 0 14px rgba(255, 255, 255, 0.05), 0 4px 8px rgba(0, 0, 0, 0.55),
        0 12px 24px rgba(0, 0, 0, 0.46), 0 22px 34px rgba(0, 0, 0, 0.36),
        3px 15px 25px rgba(210, 190, 150, 0.1);
    --event-fade-overlay: linear-gradient(
        180deg,
        rgba(12, 13, 14, 0) 0%,
        rgba(12, 13, 14, 0) 42%,
        rgba(12, 13, 14, 0.5) 60%,
        rgba(12, 13, 14, 0.82) 76%,
        rgba(12, 13, 14, 0.96) 88%,
        var(--bg-color) 100%
    );
    --event-fade-overlay-map: linear-gradient(
        180deg,
        rgba(12, 13, 14, 0) 0%,
        rgba(12, 13, 14, 0) 30%,
        rgba(12, 13, 14, 0.2) 52%,
        rgba(12, 13, 14, 0.45) 68%,
        rgba(12, 13, 14, 0.68) 80%,
        rgba(12, 13, 14, 0.85) 89%,
        rgba(12, 13, 14, 0.95) 95%,
        rgba(12, 13, 14, 0.99) 98.5%,
        var(--bg-color) 100%
    );
    --event-card-shadow-hover-browse:
        inset 0 0 0 1px rgba(255, 255, 255, 0.07),
        inset 0 0 10px rgba(255, 255, 255, 0.04), 0 3px 5px rgba(0, 0, 0, 0.55),
        0 8px 14px rgba(0, 0, 0, 0.48), 0 10px 10px rgba(210, 190, 150, 0.08);
    --event-image-border: none;
    --event-image-glow: 0 0 20px 0 rgba(152, 152, 152, 0.2);
    --event-image-glow-responsive: 0 0 20px 0 rgba(152, 152, 152, 0.2);
    --explore-link-hover: var(--ode-blue);
    --export-button: url("https://ode.fm/images/share_dark.png");
    --general-divider: 1px solid #666;
    --hero-slider-accent: #c2c2c2;
    --hero-slider-background: #272727;
    --hero-slider-button-background: #ffffff;
    --hero-slider-button-outline: #ffffff;
    --hero-slider-button-text: #0c0d0e;
    --hero-slider-title: #ffffff;
    --link-text-hover: #c2c2c2;
    --list-event-hover: #272727;
    --location-icon: url("https://ode.fm/images/location_dark.png");
    --location-overlay-background: rgba(15, 15, 15, 0.8);
    --login-button-background: #0c0d0e;
    --login-button-outline: #ffffff;
    --login-button-text: #ffffff;
    --logo-color: #ffffff;
    --registration-arrow-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 20 20'%3E%3Cpolygon points='0,0 20,0 10,10' fill='%23ffffff'/%3E%3C/svg%3E");
    --auth-card-bg: #191a1b;
    --auth-card-border: 1px solid rgba(255, 255, 255, 0.08);
    --auth-card-shadow: 0 26px 60px rgba(0, 0, 0, 0.6);
    --auth-card-text: #ffffff;
    --auth-input-bg: #0f1011;
    --auth-input-border: 1px solid rgba(255, 255, 255, 0.18);
    --auth-input-text: #ffffff;
    --auth-input-placeholder: #8e97a1;
    --auth-select-placeholder: #8e97a1;
    --auth-checkbox-border: #666;
    --main-text-color: #ffffff;
    --menu-color: #ffffff;
    --organizer-follow-button-outline-set: 1px solid var(--ode-blue);
    --organizer-follow-button-outline-unset: 1px solid #fff;
    --organizer-instagram-icon-url: url("../images/instagram_dark.svg");
    --organizer-pfp-outline: none;
    --organizer-region-icon-url: url("../images/region_dark.svg");
    --organizer-website-icon-url: url("../images/website_dark.svg");
    --profile-edit-button-background-hover: var(--ode-blue-offset);
    --profile-edit-button-outline: 1px solid var(--ode-blue);
    --profile-edit-button-outline-hover: 1px solid var(--ode-blue-offset);
    --profile-follow-button-outline: 1px solid var(--ode-blue);
    --profile-follow-button-outline-inactive: 1px solid #fff;
    --profile-tabs-track: 1px solid #666;
    --purchase-button-background-hover: var(--ode-blue-offset);
    --purchase-button-outline: 1px solid var(--ode-blue);
    --purchase-button-outline-hover: 1px solid var(--ode-blue-offset);
    --search-blur: blur(28px);
    --search-header-mask-bg: rgba(255, 255, 255, 0.06);
    --search-text-hover: #ffffff;
    --search-text-placeholder: #8e97a1;
    --search-translucent: rgba(12, 13, 14, 0.2);
    --settings-button-background: var(--bg-color);
    --settings-button-background-hover: var(--main-text-color);
    --settings-button-outline: 1px solid var(--main-text-color);
    --settings-button-text: var(--main-text-color);
    --settings-button-text-hover: var(--bg-color);
    --signup-button-background: var(--ode-blue);
    --signup-button-outline: var(--ode-blue);
    --signup-button-text: #ffffff;
    --signup-forgot: #8e97a1;
    --useraccount-link-color: var(--ode-blue);
    --signup-hover: #fff;
    --signup-outline: 1px solid #fff;
    --sort-arrow-svg: url("../images/sort-arrows-dark.svg");
    --sub-text-color: #c2c2c2;
    --tag-box-shadow: 12, 13, 14, 1;
    --tag-button-background: #fff;
    --tag-button-text: #000;
    --universal-grey: rgba(255, 255, 255, 0.15);
}