:root {
	/*valor de referencia UNICAMENTE INFORMATIVO*/
	--color-primary: hsl(358, 91%, 43%);
	--color-secondary: hsl(210, 11%, 15%);
	--color-tertiary: hsl(261, 50%, 40%);
	--color-quaternary: hsl(44, 100%, 40%);
    --color-prim: hsl(210, 11%, 15%) ;
	/*VARIABLE DE COLOR*/
	--color-primary-h: 358;
	--color-primary-s: 91%;
	--color-primary-l: 43%;

	--color-secondary-h: 210;
	--color-secondary-s: 31%;
	--color-secondary-l: 15%;

	--color-tertiary-h: 261;
	--color-tertiary-s: 50%;
	--color-tertiary-l: 40%;

	--color-quaternary-h: 44;
	--color-quaternary-s: 100%;
	--color-quaternary-l: 40%;

	/*****/
    --z-primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
    --z-primary-transparent-90: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.9);
    --z-primary-transparent-70: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.7);
    --z-primary-transparent-50: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.5);
    --z-primary-transparent-40: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.4);
    --z-primary-transparent-25: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.25);
    --z-primary-transparent-20: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2);
    --z-primary-transparent-0: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0);
    --z-primary-dark: hsl(var(--color-primary-h), var(--color-primary-s), calc(var(--color-primary-l) - 3%));
    --z-primary-darker: hsl(var(--color-primary-h), var(--color-primary-s), calc(var(--color-primary-l) - 6%));
    --z-primary-darkest: hsl(var(--color-primary-h), var(--color-primary-s), calc(var(--color-primary-l) - 10%));
    --z-primary-darkest-transparent-50: hsla(var(--color-primary-h), var(--color-primary-s), calc(var(--color-primary-l) - 10%), 0.5);
    --z-primary-light: hsl(var(--color-primary-h), var(--color-primary-s), calc(var(--color-primary-l) + 5%));
    --z-primary-disabled: hsl(var(--color-primary-h), var(--color-primary-s), calc(var(--color-primary-l) + 13%));

    --z-secondary: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-secondary-l));
    --z-secondary-transparent-90: hsla(var(--color-secondary-h), var(--color-secondary-s), var(--color-secondary-l), 0.9);
    --z-secondary-transparent-70: hsla(var(--color-secondary-h), var(--color-secondary-s), var(--color-secondary-l), 0.7);
    --z-secondary-transparent-50: hsla(var(--color-secondary-h), var(--color-secondary-s), var(--color-secondary-l), 0.5);
    --z-secondary-transparent-40: hsla(var(--color-secondary-h), var(--color-secondary-s), var(--color-secondary-l), 0.4);
    --z-secondary-transparent-25: hsla(var(--color-secondary-h), var(--color-secondary-s), var(--color-secondary-l), 0.25);
    --z-secondary-transparent-20: hsla(var(--color-secondary-h), var(--color-secondary-s), var(--color-secondary-l), 0.2);
    --z-secondary-transparent-0: hsla(var(--color-secondary-h), var(--color-secondary-s), var(--color-secondary-l), 0);
    --z-secondary-dark: hsl(var(--color-secondary-h), var(--color-secondary-s), calc(var(--color-secondary-l) - 3%));
    --z-secondary-darker: hsl(var(--color-secondary-h), var(--color-secondary-s), calc(var(--color-secondary-l) - 6%));
    --z-secondary-darkest: hsl(var(--color-secondary-h), var(--color-secondary-s), calc(var(--color-secondary-l) - 10%));
    --z-secondary-darkest-transparent-50: hsla(var(--color-secondary-h), var(--color-secondary-s), calc(var(--color-secondary-l) - 10%), 0.5);
    --z-secondary-light: hsl(var(--color-secondary-h), var(--color-secondary-s), calc(var(--color-secondary-l) + 5%));
    --z-secondary-disabled: hsl(var(--color-secondary-h), var(--color-secondary-s), calc(var(--color-secondary-l) + 13%));

    --z-tertiary: hsl(var(--color-tertiary-h), var(--color-tertiary-s), var(--color-tertiary-l));
    --z-tertiary-transparent-90: hsla(var(--color-tertiary-h), var(--color-tertiary-s), var(--color-tertiary-l), 0.9);
    --z-tertiary-transparent-70: hsla(var(--color-tertiary-h), var(--color-tertiary-s), var(--color-tertiary-l), 0.7);
    --z-tertiary-transparent-50: hsla(var(--color-tertiary-h), var(--color-tertiary-s), var(--color-tertiary-l), 0.5);
    --z-tertiary-transparent-40: hsla(var(--color-tertiary-h), var(--color-tertiary-s), var(--color-tertiary-l), 0.4);
    --z-tertiary-transparent-25: hsla(var(--color-tertiary-h), var(--color-tertiary-s), var(--color-tertiary-l), 0.25);
    --z-tertiary-transparent-20: hsla(var(--color-tertiary-h), var(--color-tertiary-s), var(--color-tertiary-l), 0.2);
    --z-tertiary-transparent-0: hsla(var(--color-tertiary-h), var(--color-tertiary-s), var(--color-tertiary-l), 0);
    --z-tertiary-dark: hsl(var(--color-tertiary-h), var(--color-tertiary-s), calc(var(--color-tertiary-l) - 3%));
    --z-tertiary-darker: hsl(var(--color-tertiary-h), var(--color-tertiary-s), calc(var(--color-tertiary-l) - 6%));
    --z-tertiary-darkest: hsl(var(--color-tertiary-h), var(--color-tertiary-s), calc(var(--color-tertiary-l) - 10%));
    --z-tertiary-darkest-transparent-50: hsla(var(--color-tertiary-h), var(--color-tertiary-s), calc(var(--color-tertiary-l) - 10%), 0.5);
    --z-tertiary-light: hsl(var(--color-tertiary-h), var(--color-tertiary-s), calc(var(--color-tertiary-l) + 5%));
    --z-tertiary-disabled: hsl(var(--color-tertiary-h), var(--color-tertiary-s), calc(var(--color-tertiary-l) + 13%));

    --z-quaternary: hsl(var(--color-quaternary-h), var(--color-quaternary-s), var(--color-quaternary-l));
    --z-quaternary-transparent-90: hsla(var(--color-quaternary-h), var(--color-quaternary-s), var(--color-quaternary-l), 0.9);
    --z-quaternary-transparent-70: hsla(var(--color-quaternary-h), var(--color-quaternary-s), var(--color-quaternary-l), 0.7);
    --z-quaternary-transparent-50: hsla(var(--color-quaternary-h), var(--color-quaternary-s), var(--color-quaternary-l), 0.5);
    --z-quaternary-transparent-40: hsla(var(--color-quaternary-h), var(--color-quaternary-s), var(--color-quaternary-l), 0.4);
    --z-quaternary-transparent-25: hsla(var(--color-quaternary-h), var(--color-quaternary-s), var(--color-quaternary-l), 0.25);
    --z-quaternary-transparent-20: hsla(var(--color-quaternary-h), var(--color-quaternary-s), var(--color-quaternary-l), 0.2);
    --z-quaternary-transparent-0: hsla(var(--color-quaternary-h), var(--color-quaternary-s), var(--color-quaternary-l), 0);
    --z-quaternary-dark: hsl(var(--color-quaternary-h), var(--color-quaternary-s), calc(var(--color-quaternary-l) - 3%));
    --z-quaternary-darker: hsl(var(--color-quaternary-h), var(--color-quaternary-s), calc(var(--color-quaternary-l) - 6%));
    --z-quaternary-darkest: hsl(var(--color-quaternary-h), var(--color-quaternary-s), calc(var(--color-quaternary-l) - 10%));
    --z-quaternary-darkest-transparent-50: hsla(var(--color-quaternary-h), var(--color-quaternary-s), calc(var(--color-quaternary-l) - 10%), 0.5);
    --z-quaternary-light: hsl(var(--color-quaternary-h), var(--color-quaternary-s), calc(var(--color-quaternary-l) + 5%));
    --z-quaternary-disabled: hsl(var(--color-quaternary-h), var(--color-quaternary-s), calc(var(--color-quaternary-l) + 13%));
    /*****/

    /* PORTO CSS VARIABLES */
	--primary: var(--z-primary);
	--secondary: var(--z-secondary);
	--tertiary: var(--z-tertiary);
	--quaternary: var(--z-quaternary);
}


html.dark .page-header{
    background-color: var(--z-secondary)!important; /*#1c2023*/
}

html.dark .text-color-dark {
    color: var(--z-primary)!important;
}

html.dark footer{
    background: #1c2023!important;
}