:root {

    /*------------------------------------------------------------
    Typography
    ------------------------------------------------------------*/

    /*----------------------------------------
    Font Families
    ----------------------------------------*/
    --font-primary: 'Lato', sans-serif;
    --font-secondary: 'Playfair Display', serif;
    --font-serif: 'Lora', serif;

    /*----------------------------------------
    Text Scale & Sizes
    ----------------------------------------*/
    --text-base: 1em;
    --scale-ratio: 1.25;

    --text-body: calc(1em + .1em);
    --text-xxs: calc(1em / (var(--scale-ratio) * var(--scale-ratio) * var(--scale-ratio)));
    --text-xs: calc(1em / (var(--scale-ratio) * var(--scale-ratio)));
    --text-sm: calc(1em / var(--scale-ratio));
    --text-md: calc(1em * var(--scale-ratio));
    --text-lg: calc(1em * var(--scale-ratio) * var(--scale-ratio));
    --text-xl: calc(1em * var(--scale-ratio) * var(--scale-ratio) * var(--scale-ratio));
    --text-xxl: calc(1em * var(--scale-ratio) * var(--scale-ratio) * var(--scale-ratio) * var(--scale-ratio));
    --text-xxxl: calc(1em * var(--scale-ratio) * var(--scale-ratio) * var(--scale-ratio) * var(--scale-ratio) * var(--scale-ratio));
    --text-xxxxl: calc(1em * var(--scale-ratio) * var(--scale-ratio) * var(--scale-ratio) * var(--scale-ratio) * var(--scale-ratio) * var(--scale-ratio));

    /*----------------------------------------
    Line Heights
    ----------------------------------------*/
    --body-line-height: 1.7;

    /*----------------------------------------
    Letter Spacing
    ----------------------------------------*/
    --letter-spacing-tight: -0.015em;
    --letter-spacing-normal: 0;
    --letter-spacing-loose: 0.03em;

    /*------------------------------------------------------------
    Vertical Rhythm
    ------------------------------------------------------------*/
    --space-xxxxs: 0.125em;
    --space-xxxs: 0.25em;
    --space-xxs: 0.375em;
    --space-xs: 0.5em;
    --space-sm: 0.75em;
    --space-md: 1.25em;
    --space-lg: 2em;
    --space-xl: 3.25em;
    --space-xxl: 5.25em;
    --space-xxxl: 8.5em;
    --space-xxxxl: 10.5em;

    --grid-space: var(--space-lg);

    /*------------------------------------------------------------
    Colors
    ------------------------------------------------------------*/

    /*----------------------------------------
    Accent Color
    ----------------------------------------*/
    --color-accent: #c03090;
    --color-accent-dark: #b23488;
    --color-accent-darker: #79297f;
    --color-accent-light: #db57af;
    --color-accent-lighter: #edabd7;
    --color-accent-lightest: #fbeef7;

    /*----------------------------------------
    Primary Color
    ----------------------------------------*/
    --color-primary: hsl(201, 100%, 36%);
    --color-primary-dark: hsl(214, 97%, 27%);
    --color-primary-darker: hsl(239, 80%, 24%);
    --color-primary-darkest: hsl(239, 80%, 17%);
    --color-primary-light: hsl(195, 100%, 39%);
    --color-primary-lighter: hsl(190, 77%, 88%);
    --color-primary-lightest: hsl(210, 100%, 98%);
    /*----------------------------------------
    Secondary Color
    ----------------------------------------*/
    --color-secondary: #ffde66;
    --color-secondary-light: #ffe485;
    --color-secondary-lighter: #ffeeb3;
    --color-secondary-lightest: #fffcf0;
    --color-secondary-dark: #ffd333;
    --color-secondary-darker: #f0c118;
    /*----------------------------------------
    Grayscale
    ----------------------------------------*/
    --gray-10: hsl(240, 3%, 19%);
    --gray-8: hsl(0, 0%, 40%);
    --gray-6: hsl(260, 1%, 48%);
    --gray-4: hsl(240, 1%, 65%);
    --gray-3: hsl(240, 1%, 74%);
    --gray-2: hsl(270, 2%, 90%);
    --gray-1: hsl(0, 0%, 96.5%);

    /*----------------------------------------
    Seven Rays - Colors
    ----------------------------------------*/
    --color-blue: hsl(201, 65%, 50%);
    --color-yellow: hsl(37, 100%, 70%);
    --color-pink: hsl(334, 98%, 82%);
    --color-white: hsl(204, 100%, 80%);
    --color-green: hsl(175, 66%, 40%);
    --color-purple: hsl(271, 33%, 55%);
    --color-violet: hsl(306, 38%, 50%);

    /* seven rays light colors */
    --color-blue-light: hsl(201, 86%, 97%);
    --color-yellow-light: hsl(37, 100%, 93.5%);
    --color-pink-light: hsl(334, 98%, 96%);
    --color-white-light: hsl(204, 100%, 96.5%);
    --color-green-light: hsl(175, 68%, 94%);
    --color-purple-light: hsl(271, 80%, 95.5%);
    --color-violet-light: hsl(300, 100%, 96%);

    /* seven rays dark colors */
    --color-yellow-dark: hsl(35 70% 15%);
    --color-pink-dark: hsl(324 88% 18%);
    --color-green-dark: hsl(150 80% 12%);
    --color-purple-dark: hsl(270 68% 22%);
    --color-violet-dark: hsl(290 72% 15%);

    /*----------------------------------------
    Seven Rays – Gradients
    ----------------------------------------*/
    --gd-blue: hsl(215, 87%, 26%) 0, hsl(217, 64%, 48%) 33%, #fff 100%;
    --gd-yellow: hsl(41, 95%, 72%) 0, hsl(49, 100%, 82%) 40%, #fff 100%;
    --gd-pink: hsl(332, 67%, 64%) 0, hsl(333, 75%, 72.5%) 33%, #fff 100%;
    --gd-green: hsl(170, 90%, 24%) 0, hsl(178, 90%, 32%) 40%, hsl(167, 78%, 90%) 88%, #fff 100%;
    --gd-purple: hsl(256, 65%, 27%) 0, hsl(273, 50%, 45%) 37%, hsla(292, 65%, 68%, .75) 75%, #fff 100%;
    --gd-violet: hsl(260, 60%, 28%) 0, hsl(283, 60%, 45%) 30%, hsla(300, 80%, 75%, .5) 75%, #fff 100%;

    /* seven rays soft gradients */
    --gd-blue-soft: hsl(212 100% 85%) 40%, #fff 100%;
    --gd-yellow-soft: hsl(45 100% 86%) 40%, #fff 100%;
    --gd-pink-soft: hsl(333 100% 92.5%) 40%, #fff 100%;
    --gd-white-soft: hsl(200 100% 91.5%) 40%, #fff 100%;
    --gd-green-soft: hsl(158 98% 93.5%) 40%, #fff 100%;
    --gd-purple-soft: hsl(260 100% 90%) 40%, #fff 100%;
    --gd-violet-soft: hsl(288 100% 90%) 40%, #fff 100%;

    /*----------------------------------------
    Seven Rays – Shadows
    ----------------------------------------*/
    --text-shadow-blue: hsl(210 70 20 / .25);
    --text-shadow-pink: hsl(330 70 20 / .3);
    --text-shadow-green: hsl(170 70 15 / .35);
    --text-shadow-purple: hsl(260 70 20 / .25);
    --text-shadow-violet: hsl(287 80 20 / .35);

    /*----------------------------------------
    Social Media Hues
    ----------------------------------------*/
    --color-facebook: #1877f2;
    --color-youtube: #ff0000;
    --color-instagram: #c32aa3;
    --color-twitter: #14171a;
    --color-whatsapp: #25d366;
    --color-telegram: #0088cc;
    --color-linkedin: #0a66c2;

    /*------------------------------------------------------------
    Global
    ------------------------------------------------------------*/
    --transparent: rgba(255, 255, 255, .001);
    --text-shadow: 2px 2px 4px rgba(0 0 0 / .15);
    --color-headings: var(--color-primary-dark);

    /*----------------------------------------
    Transitions & Effects
    ----------------------------------------*/
    --transition: all var(--duration-base) var(--ease-in-out) 0s;
    --transition-slow: all var(--duration-slow) var(--ease-in-out) 0s;
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 150ms;
    --duration-base: 300ms;
    --duration-slow: 500ms;

    /*----------------------------------------
    Boxes
    ----------------------------------------*/
    --box-shadow: 0 8px 24px hsla(210, 8%, 62%, 0.2);
    --box-shadow-hover: 0 8px 24px hsla(210, 8%, 62%, 0.3);
    --box-shadow-sm: 0 3px 9px hsla(210, 8%, 62%, 0.2);
    --box-shadow-sm-hover: 0 5px 15px hsla(210, 8%, 62%, 0.35);
    --box-shadow-dark: 0 8px 24px hsla(220, 80%, 6%, .25);
    --box-shadow-dark-hover: 0 12px 28px hsla(220, 80%, 6%, .65);
    --box-border-rad: var(--space-md);
    --box-translate: 3px;
    --box-scale: 1.025;

    /*----------------------------------------
    Images
    ----------------------------------------*/
    --img-border-rad: var(--space-md);
    --img-box-shadow: 0 25px 50px hsla(0, 0%, 0%, 0.25);


    /*----------------------------------------
    Layers
    ----------------------------------------*/
    --z-base: 1;
    --z-dropdown: 10;
    --z-modal: 100;
    --z-toast: 1000;

    --mask-bg: hsla(240, 80%, 8%, .65);

    /*----------------------------------------
    Navigation
    ----------------------------------------*/
    --nav-height: 70px;
    --rspv-nav-width: 250px;
    --toggle-rotate: 48deg;

}