:root {
    /* Rojo Vino */
    --wine-300: #800036;
    --wine-200: #F392AE;
    --wine-100: #FFF0F3;

    /* Neutral Crema */
    --cream-900: #2B0D12;
    --cream-800: #504539;
    --cream-700: #6D5F50;
    --cream-600: #8A7A69;
    --cream-500: #A89582;
    --cream-400: #C5B29E;
    --cream-300: #E2CFBA;
    --cream-200: #FFECD8;
    --cream-100: #FFF5EF;

    /* Secundario Verde */
    --green-300: #CAD864;
    --green-200: #DDE982;
    --green-100: #F2FBB3;

    /* Secundario Azul */
    --blue-300: #A2D6EF;
    --blue-200: #C3EBFE;
    --blue-100: #E2F6FF;

    /* Secundario Rojo */
    --red-300: #FC5162;
    --red-200: #FD7D89;
    --red-100: #FEA9B0;

    /* Fonts */
    --font-primary: "lastik";
    --font-secondary: "lato";
    --font-tertiary: "caveat";

    /* Neutral */
    --white: #fff;
    --black: #000;
    --neutral: #14172E;
}

/* Font-face */
@font-face {
    font-family: "lastik";
    src: url("../fonts/Lastik/Lastik-Bold.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "lato";
    src: url("../fonts/Lato/Lato-Thin.ttf") format("truetype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "lato";
    src: url("../fonts/Lato/Lato-ThinItalic.ttf") format("truetype");
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "lato";
    src: url("../fonts/Lato/Lato-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "lato";
    src: url("../fonts/Lato/Lato-LightItalic.ttf") format("truetype");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "lato";
    src: url("../fonts/Lato/Lato-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "lato";
    src: url("../fonts/Lato/Lato-Italic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "lato";
    src: url("../fonts/Lato/Lato-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "lato";
    src: url("../fonts/Lato/Lato-BoldItalic.ttf") format("truetype");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "lato";
    src: url("../fonts/Lato/Lato-Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "lato";
    src: url("../fonts/Lato/Lato-BlackItalic.ttf") format("truetype");
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "caveat";
    src: url("../fonts/Caveat/Caveat-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}