/* VARIÁVEIS DO SISTEMA: Tudo aquilo que é usado no sistema Site/Moodle IFHT, conforme Design System */

:root {

/*** CORES (NOVO) ***/
    /* PRIMÁRIA: Cor presente na maior parte da interface. Aplicação em fundos e títulos. */
    /* Marinho */
    --ifht-sys-cor-primaria-extralight:var(--ifht-ref-cor-marinho-90);
    --ifht-sys-cor-primaria-light:var(--ifht-ref-cor-marinho-80);
    --ifht-sys-cor-primaria-normal:var(--ifht-ref-cor-marinho-60);
    --ifht-sys-cor-primaria-dark:var(--ifht-ref-cor-marinho-40);
    --ifht-sys-cor-primaria-extradark:var(--ifht-ref-cor-marinho-20);

    --ifht-sys-cor-primaria-extralight-contrast:var(--ifht-ref-cor-marinho-30);
    --ifht-sys-cor-primaria-light-contrast:var(--ifht-ref-cor-marinho-20);
    --ifht-sys-cor-primaria-normal-contrast:var(--ifht-ref-cor-marinho-10);
    --ifht-sys-cor-primaria-dark-contrast:var(--ifht-ref-cor-marinho-95);
    --ifht-sys-cor-primaria-extradark-contrast:var(--ifht-ref-cor-marinho-99);

    /* SECUNDÁRIA: Cor utilizada para elementos interativos, como botões e links. */
    /* Azul */
    --ifht-sys-cor-secundaria-extralight:var(--ifht-ref-cor-azul-95);
    --ifht-sys-cor-secundaria-light:var(--ifht-ref-cor-azul-80);
    --ifht-sys-cor-secundaria-normal:var(--ifht-ref-cor-azul-60);
    --ifht-sys-cor-secundaria-dark:var(--ifht-ref-cor-azul-40);
    --ifht-sys-cor-secundaria-extradark:var(--ifht-ref-cor-azul-20);

    --ifht-sys-cor-secundaria-extralight-contrast:var(--ifht-ref-cor-azul-40);
    --ifht-sys-cor-secundaria-light-contrast:var(--ifht-ref-cor-azul-30);
    --ifht-sys-cor-secundaria-normal-contrast:var(--ifht-ref-cor-azul-10);
    --ifht-sys-cor-secundaria-dark-contrast:var(--ifht-ref-cor-azul-99);
    --ifht-sys-cor-secundaria-extradark-contrast:var(--ifht-ref-cor-azul-90);

    /* TERCIÁRIAS: Cores utilizadas para dar contraste na interface. Aplicação pontual em elementos que precisem de destaque e/ou decorativos. */
    /* Turquesa */
    --ifht-sys-cor-terciaria-1-extralight:var(--ifht-ref-cor-turquesa-90);
    --ifht-sys-cor-terciaria-1-light:var(--ifht-ref-cor-turquesa-70);
    --ifht-sys-cor-terciaria-1-normal:var(--ifht-ref-cor-turquesa-50);
    --ifht-sys-cor-terciaria-1-dark:var(--ifht-ref-cor-turquesa-40);
    --ifht-sys-cor-terciaria-1-extradark:var(--ifht-ref-cor-turquesa-20);

    --ifht-sys-cor-terciaria-1-extralight-contrast:var(--ifht-ref-cor-turquesa-30);
    --ifht-sys-cor-terciaria-1-light-contrast:var(--ifht-ref-cor-turquesa-20);
    --ifht-sys-cor-terciaria-1-normal-contrast:var(--ifht-ref-cor-turquesa-10);
    --ifht-sys-cor-terciaria-1-dark-contrast:var(--ifht-ref-cor-turquesa-0);
    --ifht-sys-cor-terciaria-1-extradark-contrast:var(--ifht-ref-cor-turquesa-95);

    /* Laranja */
    --ifht-sys-cor-terciaria-2-extralight:var(--ifht-ref-cor-laranja-95);
    --ifht-sys-cor-terciaria-2-light:var(--ifht-ref-cor-laranja-80);
    --ifht-sys-cor-terciaria-2-normal:var(--ifht-ref-cor-laranja-50);
    --ifht-sys-cor-terciaria-2-dark:var(--ifht-ref-cor-laranja-40);
    --ifht-sys-cor-terciaria-2-extradark:var(--ifht-ref-cor-laranja-20);

    --ifht-sys-cor-terciaria-2-extralight-contrast:var(--ifht-ref-cor-laranja-40);
    --ifht-sys-cor-terciaria-2-light-contrast:var(--ifht-ref-cor-laranja-30);
    --ifht-sys-cor-terciaria-2-normal-contrast:var(--ifht-ref-cor-laranja-10);
    --ifht-sys-cor-terciaria-2-dark-contrast:var(--ifht-ref-cor-laranja-99);
    --ifht-sys-cor-terciaria-2-extradark-contrast:var(--ifht-ref-cor-laranja-70);

    /* --ifht-sys-cor-terciaria-3-extralight:var(--ifht-ref-cor-amarelo-95);
    --ifht-sys-cor-terciaria-3-light:var(--ifht-ref-cor-amarelo-80);
    --ifht-sys-cor-terciaria-3-normal:var(--ifht-ref-cor-amarelo-60);
    --ifht-sys-cor-terciaria-3-dark:var(--ifht-ref-cor-amarelo-40);
    --ifht-sys-cor-terciaria-3-extradark:var(--ifht-ref-cor-amarelo-20);

    --ifht-sys-cor-terciaria-3-extralight-contrast:var(--ifht-ref-cor-amarelo-30);
    --ifht-sys-cor-terciaria-3-light-contrast:var(--ifht-ref-cor-amarelo-20);
    --ifht-sys-cor-terciaria-3-normal-contrast:var(--ifht-ref-cor-amarelo-10);
    --ifht-sys-cor-terciaria-3-dark-contrast:var(--ifht-ref-cor-amarelo-90);
    --ifht-sys-cor-terciaria-3-extradark-contrast:var(--ifht-ref-cor-amarelo-70); */

    /* APOIO: Cores utilizadas preferencialmente para elementos neutros, como textos, sombras e mensagens de alerta. */
    /* Cinza */
    --ifht-sys-cor-neutra-extralight:var(--ifht-ref-cor-cinza-95);
    --ifht-sys-cor-neutra-light:var(--ifht-ref-cor-cinza-80);
    --ifht-sys-cor-neutra-normal:var(--ifht-ref-cor-cinza-50);
    --ifht-sys-cor-neutra-dark:var(--ifht-ref-cor-cinza-40);
    --ifht-sys-cor-neutra-extradark:var(--ifht-ref-cor-cinza-20);

    --ifht-sys-cor-neutra-extralight-contrast:var(--ifht-ref-cor-cinza-40);
    --ifht-sys-cor-neutra-light-contrast:var(--ifht-ref-cor-cinza-30);
    --ifht-sys-cor-neutra-normal-contrast:var(--ifht-ref-cor-cinza-10);
    --ifht-sys-cor-neutra-dark-contrast:var(--ifht-ref-cor-cinza-99);
    --ifht-sys-cor-neutra-extradark-contrast:var(--ifht-ref-cor-cinza-60);

    /* Branco */
    --ifht-sys-cor-neutra-branco: var(--ifht-ref-cor-branco);


    /* Verde */
    --ifht-sys-cor-apoio-2-extralight:var(--ifht-ref-cor-verde-80);
    --ifht-sys-cor-apoio-2-light:var(--ifht-ref-cor-verde-70);
    --ifht-sys-cor-apoio-2-normal:var(--ifht-ref-cor-verde-50);
    --ifht-sys-cor-apoio-2-dark:var(--ifht-ref-cor-verde-40);
    --ifht-sys-cor-apoio-2-extradark:var(--ifht-ref-cor-verde-30);

    --ifht-sys-cor-apoio-2-extralight-contrast:var(--ifht-ref-cor-verde-20);
    --ifht-sys-cor-apoio-2-light-contrast:var(--ifht-ref-cor-verde-10);
    --ifht-sys-cor-apoio-2-normal-contrast:var(--ifht-ref-cor-verde-0);
    --ifht-sys-cor-apoio-2-dark-contrast:var(--ifht-ref-cor-verde-95);
    --ifht-sys-cor-apoio-2-extradark-contrast:var(--ifht-ref-cor-verde-90);


    /* Amarelo */
    --ifht-sys-cor-apoio-3-extralight:var(--ifht-ref-cor-amarelo-90);
    --ifht-sys-cor-apoio-3-light:var(--ifht-ref-cor-amarelo-70);
    --ifht-sys-cor-apoio-3-normal:var(--ifht-ref-cor-amarelo-50);
    --ifht-sys-cor-apoio-3-dark:var(--ifht-ref-cor-amarelo-40);
    --ifht-sys-cor-apoio-3-extradark:var(--ifht-ref-cor-amarelo-30);

    --ifht-sys-cor-apoio-3-extralight-contrast:var(--ifht-ref-cor-amarelo-30);
    --ifht-sys-cor-apoio-3-light-contrast:var(--ifht-ref-cor-amarelo-20);
    --ifht-sys-cor-apoio-3-normal-contrast:var(--ifht-ref-cor-amarelo-10);
    --ifht-sys-cor-apoio-3-dark-contrast:var(--ifht-ref-cor-amarelo-0);
    --ifht-sys-cor-apoio-3-extradark-contrast:var(--ifht-ref-cor-amarelo-80);

    /* Vermelho */
    --ifht-sys-cor-apoio-4-extralight:var(--ifht-ref-cor-vermelho-90);
    --ifht-sys-cor-apoio-4-light:var(--ifht-ref-cor-vermelho-70);
    --ifht-sys-cor-apoio-4-normal:var(--ifht-ref-cor-vermelho-50);
    --ifht-sys-cor-apoio-4-dark:var(--ifht-ref-cor-vermelho-40);
    --ifht-sys-cor-apoio-4-extradark:var(--ifht-ref-cor-vermelho-30);

    --ifht-sys-cor-apoio-4-extralight-contrast:var(--ifht-ref-cor-vermelho-30);
    --ifht-sys-cor-apoio-4-light-contrast:var(--ifht-ref-cor-vermelho-20);
    --ifht-sys-cor-apoio-4-normal-contrast:var(--ifht-ref-cor-vermelho-10);
    --ifht-sys-cor-apoio-4-dark-contrast:var(--ifht-ref-cor-vermelho-95);
    --ifht-sys-cor-apoio-4-extradark-contrast:var(--ifht-ref-cor-vermelho-90);


    /* Gradientes */
    --ifht-sys-cor-gradiente-1: linear-gradient(180deg, #00508C 7.96%, rgba(0, 80, 140, 0) 50%), linear-gradient(180deg, rgba(1, 26, 51, 0) 40.63%, rgba(0, 80, 140, 0.5) 100%), radial-gradient(124.37% 220.75% at 0% 16.12%, #002C5B 0%, #1964B5 50.52%, #78B9B2 89.58%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
    --ifht-sys-cor-gradiente-2: linear-gradient(0deg, #011f3f 0%, #013266 100%);
    --ifht-sys-cor-gradiente-3: linear-gradient(90deg,#BED4E9 0%, #BFE8EA 100%);

    /* Fundos e Superfícies */
    --ifht-sys-cor-fundo: var(--ifht-sys-cor-primaria-dark-contrast);
    --ifht-sys-cor-superficie-1: var(--ifht-sys-cor-neutra-branco);
    --ifht-sys-cor-superficie-2: var(--ifht-sys-cor-primaria-light);
    --ifht-sys-cor-superficie-3: var(--ifht-sys-cor-primaria-extralight);

    /* OLD - Remover depois que substituir na página */
    --ifht-sys-cor-neutra-0: var(--ifht-ref-cor-marinho-10);
    --ifht-sys-cor-neutra-1: var(--ifht-ref-cor-marinho-80);
    --ifht-sys-cor-neutra-2: var(--ifht-ref-cor-marinho-90);
    --ifht-sys-cor-neutra-3: var(--ifht-ref-cor-marinho-95);
    --ifht-sys-cor-neutra-4: var(--ifht-ref-cor-marinho-99);
    --ifht-sys-cor-neutra-5: var(--cor-branco);

    
/* ESPAÇAMENTO */
    --ifht-sys-spacing-5xl:var(--ifht-ref-espaçamento-10); 
    --ifht-sys-spacing-4xl:var(--ifht-ref-espaçamento-8);  
    --ifht-sys-spacing-3xl:var(--ifht-ref-espaçamento-7);
    --ifht-sys-spacing-2xl:var(--ifht-ref-espaçamento-6);
    --ifht-sys-spacing-xl:var(--ifht-ref-espaçamento-5);
    --ifht-sys-spacing-lg:var(--ifht-ref-espaçamento-4);
    --ifht-sys-spacing-md:var(--ifht-ref-espaçamento-3);
    --ifht-sys-spacing-sm:var(--ifht-ref-espaçamento-2);
    --ifht-sys-spacing-xs:var(--ifht-ref-espaçamento-1);


    /* Para trocar depois (retirar o padding e deixar apenas spacing */
    --ifht-sys-spacing-padding-xxxl:var(--ifht-sys-spacing-5xl);
    --ifht-sys-spacing-padding-xxl:var(--ifht-sys-spacing-4xl);
    --ifht-sys-spacing-padding-xl:var(--ifht-sys-spacing-xl);
    --ifht-sys-spacing-padding-lg:var(--ifht-sys-spacing-lg);
    --ifht-sys-spacing-padding-md:var(--ifht-sys-spacing-md);
    --ifht-sys-spacing-padding-sm:var(--ifht-sys-spacing-sm);
    --ifht-sys-spacing-padding-xs:var(--ifht-sys-spacing-xs);
    

    /* --ifht-sys-padding-botao-lg:var(--ifht-ref-escala-8);
    --ifht-sys-padding-botao-md:var(--ifht-ref-escala-10);
    --ifht-sys-padding-botao-sm:var(--ifht-ref-escala-12); */

/*** BORDAS ***/

    /* RADIUS */
    --ifht-sys-raio-borda-xs: var(--ifht-ref-border-radius-1);
    --ifht-sys-raio-borda-sm: var(--ifht-ref-border-radius-2);
    --ifht-sys-raio-borda-md: var(--ifht-ref-border-radius-3);
    --ifht-sys-raio-borda-lg: var(--ifht-ref-border-radius-4);
    --ifht-sys-raio-borda-xl: var(--ifht-ref-border-radius-5);
    --ifht-sys-raio-borda-full: var(--ifht-ref-border-radius-full);

    /* CORES */
    --ifht-sys-cor-borda-extralight:var(--ifht-sys-cor-superficie-3);
    --ifht-sys-cor-borda-light: var(--ifht-sys-cor-superficie-2);
    --ifht-sys-cor-borda-normal: var(--ifht-sys-cor-fundo);
    --ifht-sys-cor-borda-dark: var(--ifht-sys-cor-primaria-dark);
    --ifht-sys-cor-borda-extradark: var(--ifht-sys-cor-primaria-extradark);

    /* ESPESSURA */
    --ifht-sys-espessura-borda-xs: var(--ifht-ref-border-width-1);
    --ifht-sys-espessura-borda-sm: var(--ifht-ref-border-width-2);
    --ifht-sys-espessura-borda-md: var(--ifht-ref-border-width-3);
    --ifht-sys-espessura-borda-lg: var(--ifht-ref-border-width-4);
    --ifht-sys-espessura-borda-xl: var(--ifht-ref-border-width-5);


/*ELEVAÇÕES*/
    --ifht-sys-sombra-botao-default: var(--ifht-ref-elevacao-2);
    --ifht-sys-sombra-card: var(--ifht-ref-elevacao-2);
    --ifht-sys-sombra-menu-lateral: var(--ifht-ref-elevacao-3);

/* MARCADORES (listas ordenadas, cursos e outros) */

    /* FONTE */
   --ifht-sys-txt-marcador: var(--ifht-ref-familia-5);

    /* CORES */
    --ifht-sys-cor-fundo-marcador: var(--ifht-sys-cor-primaria-2);
    --ifht-sys-cor-txt-marcador: var( --ifht-sys-cor-superficie-3);

/* FUNDOS DE SEÇÃO  */
    --ifht-sys-cor-fundo-equipe: var(--ifht-ref-cor-marinho-95);

/* FORMULÁRIOS */
    --ifht-sys-formulario-borda-cor: var(--ifht-sys-cor-primaria-extralight);
    --ifht-sys-formulario-borda-raio: var(--ifht-sys-raio-borda-sm);
    --ifht-sys-formulario-placeholder-cor: var(--cor-cinza-400);
    --ifht-sys-formulario-label-family: var(--ifht-sys-txt-familia-titulo);
}