:root {
    /*BASIC PALETTE*/
    --black: #060915;
    --black-transparency: #06091599;
    --white: #f5f6e7;
    --white-transparency: #f5f6e777;

    /*SEMANTIC COLORS*/
    --primary: #AF1114;
    --accent: #cdc41a;
    --success: #2dfe8f;
    --info: #339fde;
    --alert: #cdc41a;
    --error: var(--primary);
    
    /*SHADOWS*/
    --shadow: drop-shadow(3px 3px 2px #0A030Eff) drop-shadow(4px 1px 2px #0A030Eff);
    --button-shadow: .1em 1em 1em var(--black-transparency);
    
    /*TYPOGRAPHY*/
    --base-font-size: 100%;
    --font-family-body: 'Fjord One';
    --font-body: "Fjord One", system-ui, sans-serif;
    --font-family-header: 'Poppins' , var(--font-body);
    --h1-font-size: 2.25rem;
    --h2-font-size: 1.61rem;
    --h3-font-size: 1.25rem;
    --h4-font-size: 1.1rem;
    --h5-font-size: 1.1rem;
    --h6-font-size: 1.1rem;
    --p-font-size: 1rem;
    --button-font-size: 1rem;
    --nav-font-size: 1.1rem;   

    /*ICONOGRAPHY*/
    --icon-font-size: 2rem;

    /*SPACING + SAFE AREAS*/
    --mobile-side-margin: 1.5rem;
    --mobile-top-margin: calc(3rem + env(safe-area-inset-top));
    --mobile-bottom-margin: 2rem;
    --mobile-inner-margin: 1.5rem;

    /*LAYOUT SIZING*/
    /* --max-width: 300px; */

    /*BORDER + RADIUS*/
    --border-radius: .25rem;
    --button-border: .125em solid var(--white);








}