/* ==========================================================================
   Cores da IndieSquad, nos dois temas.

   A interface e tinta e papel: preto, branco e cinzas, sem cor de destaque.
   Cor so aparece em duas coisas:
     - no conteudo: cada area do catalogo e uma "classe" com cor propria
       (Arte, Audio, Design, Producao, Programacao), e as pessoas, vagas e
       projetos levam a cor delas;
     - na faixa de assinatura: as cinco cores lado a lado, a mesma da logo.
   Verde, amarelo e vermelho ficam so pra estado (aceita, pendente, recusada).

   A Mosaic UI (static/mosaic-ui) le as cores das variaveis --cor*; aqui o
   "destaque" dela e a propria tinta, entao botao principal e item ativo
   saem invertidos, preto no branco ou branco no preto.
   ========================================================================== */

:root,
:root[data-tema="escuro"] {
    color-scheme: dark;

    --corDestaque: #ecebe6;
    --corFundoDestaque: #ecebe6;
    --corTextoDestaque: #0b0b0c;

    --corAcentoSecundario: #8e8d88;
    --corFundoAcentoSecundario: #232325;
    --corTextoAcentoSecundario: #ecebe6;

    --corAcentoTerciario: #8e8d88;
    --corFundoAcentoTerciario: #232325;
    --corTextoAcentoTerciario: #ecebe6;

    --corDestrutiva: #ff7a6b;
    --corFundoDestrutivo: #5e1710;
    --corTextoDestrutivo: #ffdad5;

    --corSucesso: #7fdc8c;
    --corFundoSucesso: #193a20;
    --corTextoSucesso: #c9f5cf;

    --corFundoVisualizacao: #0b0b0c;
    --corFundoJanela: #0b0b0c;
    --corFundoBarraLateralSecundaria: #141416;
    --corFundoBarraCabecalho: #0b0b0c;
    --corFundoBarraLateral: #0b0b0c;
    --corFundoCartao: #111113;
    --corFundoDialogo: #141416;
    --corFundoPopUp: #1d1d20;
    --corTextoJanela: #ecebe6;

    /* as classes */
    --is-arte: #ff7eb3;
    --is-audio: #ffb547;
    --is-design: #a493ff;
    --is-producao: #b4e05c;
    --is-programacao: #55a8ff;

    /* estado */
    --is-ok: #7fdc8c;
    --is-espera: #ffb547;
    --is-erro: #ff7a6b;

    --is-tinta: #ecebe6;
    --is-papel: #0b0b0c;
    --is-regua: #262629;
    --is-regua-forte: #3a3a3e;

    /* o quanto do fundo de pixels aparece */
    --is-pixels: 0.22;
}

:root[data-tema="claro"] {
    color-scheme: light;

    --corDestaque: #121212;
    --corFundoDestaque: #121212;
    --corTextoDestaque: #f3f2ee;

    --corAcentoSecundario: #6b6a66;
    --corFundoAcentoSecundario: #e4e2dc;
    --corTextoAcentoSecundario: #121212;

    --corAcentoTerciario: #6b6a66;
    --corFundoAcentoTerciario: #e4e2dc;
    --corTextoAcentoTerciario: #121212;

    --corDestrutiva: #c42b1c;
    --corFundoDestrutivo: #fbe0db;
    --corTextoDestrutivo: #6e140b;

    --corSucesso: #1c7d36;
    --corFundoSucesso: #d6efda;
    --corTextoSucesso: #0d4a1d;

    --corFundoVisualizacao: #f3f2ee;
    --corFundoJanela: #f3f2ee;
    --corFundoBarraLateralSecundaria: #e9e7e1;
    --corFundoBarraCabecalho: #f3f2ee;
    --corFundoBarraLateral: #f3f2ee;
    --corFundoCartao: #fbfaf7;
    --corFundoDialogo: #fbfaf7;
    --corFundoPopUp: #e4e2dc;
    --corTextoJanela: #121212;

    --is-arte: #d0306f;
    --is-audio: #b06400;
    --is-design: #5b45d6;
    --is-producao: #4a840f;
    --is-programacao: #1665c4;

    --is-ok: #1c7d36;
    --is-espera: #b06400;
    --is-erro: #c42b1c;

    --is-tinta: #121212;
    --is-papel: #f3f2ee;
    --is-regua: #dcdad3;
    --is-regua-forte: #bdbbb3;

    --is-pixels: 0.16;
    --mo-tecla-sombra: 70%;
}

/* a cor de cada classe vira --is-cor dentro de quem escolheu ela */
.classe-arte { --is-cor: var(--is-arte); }
.classe-audio { --is-cor: var(--is-audio); }
.classe-design { --is-cor: var(--is-design); }
.classe-producao { --is-cor: var(--is-producao); }
.classe-programacao { --is-cor: var(--is-programacao); }

/* projetos nao tem classe: o tom sai do nome, e e sempre o mesmo */
[data-tom="0"] { --is-cor: var(--is-arte); }
[data-tom="1"] { --is-cor: var(--is-audio); }
[data-tom="2"] { --is-cor: var(--is-design); }
[data-tom="3"] { --is-cor: var(--is-producao); }
[data-tom="4"] { --is-cor: var(--is-programacao); }

:root {
    --is-largura: 1180px;
    --is-largura-media: 880px;
    --is-mira: var(--is-tinta);

    /* nada de canto redondo: tudo e quina */
    --is-raio: 0px;
    --mo-raio-p: 0px;
    --mo-raio-m: 0px;
    --mo-raio-g: 0px;
    --mo-raio-xg: 0px;

    /* a faixa de assinatura: as cinco classes lado a lado */
    --is-faixa: linear-gradient(90deg,
        var(--is-arte) 0 20%,
        var(--is-audio) 20% 40%,
        var(--is-design) 40% 60%,
        var(--is-producao) 60% 80%,
        var(--is-programacao) 80% 100%);
}