/* =========================================================
   CHRIS BROWN — GLOBAL VARIABLES
   ========================================================= */

:root {

    /* -----------------------------------------------------
       COLORS
       ----------------------------------------------------- */

    --color-brown: #241713;
    --color-brown-dark: #17100d;
    --color-brown-deep: #100b09;

    --color-cream: #e7dcc7;
    --color-cream-light: #f0e7d7;

    --color-white: #ffffff;
    --color-black: #000000;

    --color-text: #e7dcc7;
    --color-text-muted: rgba(231, 220, 199, 0.68);

    --color-border: rgba(231, 220, 199, 0.35);


    /* -----------------------------------------------------
       TYPOGRAPHY
       ----------------------------------------------------- */

    --font-primary: 'Clarendon', serif;
    --font-sans: Arial, Helvetica, sans-serif;


    /* -----------------------------------------------------
       FONT SIZES
       ----------------------------------------------------- */

    --text-xs: 10px;
    --text-sm: 12px;
    --text-base: 14px;
    --text-md: 16px;
    --text-lg: 20px;
    --text-xl: 28px;
    --text-2xl: 42px;
    --text-3xl: 64px;
    --text-hero: clamp(70px, 12vw, 180px);


    /* -----------------------------------------------------
       LAYOUT
       ----------------------------------------------------- */

    --container-width: 1400px;
    --container-padding: 40px;

    --header-height: 90px;


    /* -----------------------------------------------------
       SPACING
       ----------------------------------------------------- */

    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 40px;
    --space-xl: 60px;
    --space-2xl: 90px;
    --space-3xl: 120px;


    /* -----------------------------------------------------
       BORDERS
       ----------------------------------------------------- */

    --border-thin: 1px solid rgba(231, 220, 199, 0.25);


    /* -----------------------------------------------------
       TRANSITIONS
       ----------------------------------------------------- */

    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;


    /* -----------------------------------------------------
       Z-INDEX
       ----------------------------------------------------- */

    --z-content: 1;
    --z-header: 100;
    --z-menu: 200;
    --z-modal: 500;


    /* -----------------------------------------------------
       EFFECTS
       ----------------------------------------------------- */

    --overlay-dark: rgba(16, 11, 9, 0.45);
    --overlay-heavy: rgba(16, 11, 9, 0.72);

}