:root {
    /* font family */
    --font-headings: trade-gothic-next, sans-serif;
    --font-body: futura-pt, sans-serif;
    --font-btns: trade-gothic-next, sans-serif;

    /* base colors */
    --primary: #cf112d;         /* primary brand color */
    --secondary: #000000;       /* secondary brand color */
    --black: #000;              /* keep as black color */
    --white: #fff;              /* keep as white color */
    --dark-gray: #6c757d;       /* keep as dark gray color */
    --gray: #d1d1d1;            /* keep as medium gray color */
    --light-gray: #f1f1f1;      /* keep as light gray color */
    --success: #28a745;         /* green */
    --warning: #ffc107;         /* yellow or orange */
    --error: #dc3545;           /* red */

    /* text colors */
    --text-color: #000;         /* default font color */
    --text-link: var(--primary); /* text link color */
    --text-muted: #6c757d;      /* keep as gray color */
    --text-light: #f1f1f1;      /* keep as light color */
    --text-dark: #333;          /* keep as dark color */

    /* header colors */
    --top-nav: var(--primary);
    --top-nav-text: var(--text-light);
    --main-nav: var(--black);
    --main-nav-text: var(--text-light);
    --main-nav-hover: var(--primary);
    --main-nav-dropdown: var(--primary);
    --main-nav-dropdown-text: var(--text-light);
    --main-nav-dropdown-hover: var(--text-light);
    --cart-bubble-color: var(--secondary);

    /* footer colors */
    --footer: #4a4a48;
    --footer-text: #fff;
    --footer-hover: var(--text-link);
    --bottom-footer: var(--black);
    --bottom-footer-text: var(--text-light);

    /* button colors */
    --primary-btn: var(--primary);
    --primary-btn-text: var(--text-light);
    --primary-btn-hover: var(--primary);
    --secondary-btn: var(--gray);
    --secondary-btn-text: var(--text-dark);
    --secondary-btn-hover: var(--dark-gray);
}