/* Imported Fonts (WOFF2 first - about 70% smaller; OTF kept as a fallback) */
@font-face {
    font-family: 'SloopScriptPro';
    src: url('../fonts/sloop-script-pro-bold.woff2') format('woff2'), url('../fonts/sloop-script-pro-bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face{
    font-family: 'Garet';
    src: url('../fonts/Garet-Book.woff2') format('woff2'), url('../fonts/Garet-Book.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face{
    font-family: 'Garet - Heavy';
    src: url('../fonts/Garet-Heavy.woff2') format('woff2'), url('../fonts/Garet-Heavy.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* Google Fonts @import removed: it sat after the @font-face rules, where browsers ignore it,
   so it never loaded. Removing it changes nothing visually. To actually load Poppins/Anton,
   add a <link> to Google Fonts in the page <head> instead. */


/* Theme Colors, Logos and Fonts */
:root{
    /* colors */
    --1: #e8b4a3;
    --2: #ff3131;
    --3: #fe1166;
    --4: #F8C5F6;
    --5: #ffc5cf;
    --6: #de506e;

    --7: #060a0d;
    --8: #1d1f20;
    --9: #626c76;
    --10: #ffffff;

    --11: #ffb700;
    --12: #626c76;
    --13: #99ba5e;
    --14: #70bae1;
    --15: #b1d7cd;
    --16: #cddef0;
    --17: #eedafa;

    /* muted/disabled text (was previously undefined, causing unpredictable
       colors on readonly inputs, select arrows, and occasion labels) */
    --silver: #7a848d;

    /* logos */
    --logo1: url("images/logo1.png");
    --logo2: url("images/logo2.png");
    --logo3: url("images/logo3.png");
    --logo4: url("images/logo4.png");

    /* fonts */
    --sloop-script: 'SloopScriptPro', sans-serif;
    --garet: 'Garet', sans-serif;
    --garet-heavy: 'Garet - Heavy', sans-serif;
    --poppins: 'Poppins', sans-serif;
    --anton: 'Anton', sans-serif;
}