@font-face {
    font-family: "The Mad Cat Sans";
    src: url("../font/The Mad Cat Sans Regular.ttf");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "The Mad Cat Sans";
    src: url("../font/The Mad Cat Sans Bold.ttf");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "The Mad Cat Serif";
    src: url("../font/The Mad Cat Serif.ttf");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --primary-color: #ffffff;
    --secondary-color: #231f20;
    --accent-color: #f4b8c7;
    --pale-accent-color: #fff5f8;
    --orange-color: #ff7214;
    --pale-orange-color: #fdefe5;
    --gray-color: #ebebeb;
    --light-gray-color: #f5f5f5;
    --opacity-color: rgba(35, 31, 32, 0.174);

    --cookie-paper: #FFDDE5;
    --cookie-bg: #8E3513;

    /* Card color */
    --light-pink: #FFD9EF;
    --dark-pink: #EE6983;
    --orange: #F8572D;
    --nine-lives-society: #FFFEF1;
    --nine-lives-dark: #EEB769;
    --nine-lives-light: #FFDFB0;

    --font-base: "The Mad Cat Sans", sans-serif;
    --font-header: "The Mad Cat Serif", serif;

    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 32px;

    --size-carousel-indicator-height: 12px;

    --radius: 8px;
}