@import url('https://fonts.googleapis.com/css2?family=Darker+Grotesque:wght@300..900&display=swap');
:root {
    --bs-font-sans-serif: "Darker Grotesque", system-ui, -apple-system, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-font-family-base: "Darker Grotesque", system-ui, -apple-system, sans-serif;
    /* existing primary variable */
    --primary-bg-color: green;
    /* extracted from baseline.css */
    --gray-8d: #8d8d8d;
    --white: #ffffff;
    --color-gray: #8d8d8d;
    --black: #000000;
    --orange: #f05027;
    --purple: #c514b4;
    --brown-66553d: #66553d;
    --light-cad5da: #cad5da;
    --dark-2f2f2f: #2f2f2f;
    --topnavigation: #ffffff;
    --topnavigationHover: #cdcdcd;
    --color-gray-b8: #ff0000;
    --color-white: #ffffff;
    /* Links */
    --link: #000000;
    --linkHover: #c514b4;
    /* semantic / helper variables */
    --white-25: rgba(255,255,255,0.225);
    --shadow-02: rgba(0,0,0,0.2);
    /* added for customer.css */
    --red: #ff0000;
    --e5e5e3: #E5E5E3;
    --gradient-primary-red-purple-white-to-bottom: linear-gradient(to bottom, var(--dark-2f2f2f), var(--gray-8d), var(--white));
    --gradient-primary-to-right: linear-gradient(to right, var(--orange), var(--purple));
    --gradient-primary-to-left: linear-gradient(to left, var(--orange), var(--purple));
    --gradient-primary-to-top: linear-gradient(to top, var(--orange), var(--purple));
    --gradient-primary-to-top-right: linear-gradient(to top right, var(--orange));
    /* 1,2 3 block start */
    --block-bg: #dbdbdb;
    --block-border: #000000;
    --block-title: #000000;
    --block-text: #000000;
    /* 1,2 3 block end */
    /* Album Start */
    --albumtag: green;
    /* Album End */
    /* Cards start */
    --card-bg: #000000;
    --cardtitle: #ffffff;
    --cardtext: #ffffff;
    /* Cards end */
    /* Footer */
    --footerlink: #ffffff;
    --footerlinkhover: #cdcdcd;
    --footertext: #ffffff;
    /* Footer end */
}