/* Sistema de design do INDIE HOPS.
 *
 * Referência de layout: painéis administrativos claros no estilo Mint —
 * fundo neutro levemente frio, cartões brancos com sombra difusa, cantos
 * generosos, muito respiro e tipografia calma.
 *
 * A cor é a da marca (verde INDIE HOPS), não o violeta da referência: a
 * identidade do truck é verde e trocá-la por roxo apagaria a marca.
 */

:root {
  color-scheme: light;

  /* ---- superfícies ------------------------------------------------ */
  --fundo: #f5f6fa;          /* plano da página */
  --superficie: #ffffff;     /* cartão */
  --superficie-2: #fafbfc;   /* cabeçalho de tabela, área afundada */
  --superficie-3: #f2f4f7;   /* trilho, chip neutro, hover */

  /* ---- tinta ------------------------------------------------------- */
  --tinta: #101828;          /* títulos e números */
  --tinta-2: #475467;        /* corpo */
  /* Rótulo e apoio. Era #98a2b3 (2,6:1) e reprovava em 40 lugares; este
     passa 4,5:1 em todas as superfícies claras, pior caso 4,88:1 sobre o
     cinza de trilho, e ainda fica visivelmente mais claro que o corpo. */
  --tinta-3: #5f6a7a;
  --linha: #eaecf0;          /* divisor */
  --linha-2: #d0d5dd;        /* borda de controle */

  /* ---- marca ------------------------------------------------------- */
  --marca: #088038;          /* verde bandeira do logo */
  --marca-escura: #066a2d;
  --marca-clara: #e8f5ec;    /* fundo de estado ativo */
  --marca-tinta: #ffffff;
  --limao: #90c020;          /* limão do "CHOPP TRUCK" */
  --limao-claro: #f2f8e0;

  /* ---- estado ------------------------------------------------------ */
  --ok: #12a150;
  --ok-fundo: #e9f7ef;
  --alerta: #e8a33d;
  --alerta-fundo: #fdf4e7;
  --erro: #e40c18;           /* vermelho da estrela da marca */
  --erro-fundo: #fdecee;
  --info-fundo: #eef4ff;

  /* ---- séries de gráfico (validadas para daltonismo) -------------- */
  --s1: #2a78d6;
  --s2: #eb6834;
  --s3: #1baf7a;
  --s4: #eda100;
  --s5: #e87ba4;
  --s6: #008300;
  --s7: #4a3aa7;
  --s8: #e34948;
  --grade: #eaecf0;

  /* ---- tipografia -------------------------------------------------- */
  --fonte: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-xs: 11.5px;
  --t-sm: 12.5px;
  --t-base: 14px;
  --t-lg: 15.5px;
  --t-xl: 18px;
  --t-2xl: 22px;
  --t-3xl: 27px;

  /* ---- forma ------------------------------------------------------- */
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-full: 999px;

  /* Sombras difusas e frias, como as do painel de referência: quase
     imperceptíveis de perto, mas é o que descola o cartão do fundo. */
  --sombra-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --sombra: 0 1px 3px rgba(16, 24, 40, .06), 0 6px 16px -4px rgba(16, 24, 40, .06);
  --sombra-lg: 0 8px 24px -6px rgba(16, 24, 40, .1), 0 20px 48px -12px rgba(16, 24, 40, .12);

  /* ---- espaço ------------------------------------------------------ */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-6: 20px;
  --e-8: 26px;
  --e-10: 32px;

  --lateral: 236px;          /* largura do menu */
  --lateral-fechada: 68px;
}

/* ------------------------------------------------------------------ escuro */

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-tema="claro"])) {
    color-scheme: dark;
    --fundo: #0d0f13;
    --superficie: #16191f;
    --superficie-2: #1b1f26;
    --superficie-3: #232830;
    --tinta: #f2f4f7;
    --tinta-2: #b0b7c3;
    --tinta-3: #8f97a5;  /* 5:1 até sobre --superficie-3 */
    --linha: #242932;
    --linha-2: #333946;

    --marca: #12a346;
    --marca-escura: #0d8a3a;
    --marca-clara: #12251a;
    --limao: #a8d43a;
    --limao-claro: #1d2411;

    --ok: #2ec06a;
    --ok-fundo: #12251a;
    --alerta: #e8a33d;
    --alerta-fundo: #2a2113;
    --erro: #f0444e;
    --erro-fundo: #2a1517;
    --info-fundo: #141c2b;

    --s1: #3987e5;
    --s2: #d95926;
    --s3: #199e70;
    --s4: #c98500;
    --s5: #d55181;
    --s6: #008300;
    --s7: #9085e9;
    --s8: #e66767;
    --grade: #242932;

    --sombra-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --sombra: 0 1px 3px rgba(0, 0, 0, .5), 0 6px 16px -4px rgba(0, 0, 0, .4);
    --sombra-lg: 0 8px 24px -6px rgba(0, 0, 0, .6), 0 20px 48px -12px rgba(0, 0, 0, .5);
  }
}

:root[data-tema="escuro"] {
  color-scheme: dark;
  --fundo: #0d0f13;
  --superficie: #16191f;
  --superficie-2: #1b1f26;
  --superficie-3: #232830;
  --tinta: #f2f4f7;
  --tinta-2: #b0b7c3;
  --tinta-3: #8f97a5;  /* 5:1 até sobre --superficie-3 */
  --linha: #242932;
  --linha-2: #333946;

  --marca: #12a346;
  --marca-escura: #0d8a3a;
  --marca-clara: #12251a;
  --limao: #a8d43a;
  --limao-claro: #1d2411;

  --ok: #2ec06a;
  --ok-fundo: #12251a;
  --alerta: #e8a33d;
  --alerta-fundo: #2a2113;
  --erro: #f0444e;
  --erro-fundo: #2a1517;
  --info-fundo: #141c2b;

  --s1: #3987e5;
  --s2: #d95926;
  --s3: #199e70;
  --s4: #c98500;
  --s5: #d55181;
  --s6: #008300;
  --s7: #9085e9;
  --s8: #e66767;
  --grade: #242932;

  --sombra-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --sombra: 0 1px 3px rgba(0, 0, 0, .5), 0 6px 16px -4px rgba(0, 0, 0, .4);
  --sombra-lg: 0 8px 24px -6px rgba(0, 0, 0, .6), 0 20px 48px -12px rgba(0, 0, 0, .5);
}

/* ═════════════════════════════════════════ cor de destaque ═══ */

/* O verde da marca é o padrão. Quem opera o sistema o dia inteiro pode
   preferir outro tom, então a cor vive num atributo no <html> e sobrescreve
   só os quatro tokens de destaque — o resto da paleta não se mexe. */

:root[data-cor="verde-escuro"] {
  --marca: #05622a; --marca-escura: #044a20; --marca-clara: #e6f1ea; --marca-tinta: #ffffff;
}
:root[data-cor="lima"] {
  --marca: #4e8c0b; --marca-escura: #3d6e08; --marca-clara: #eef5e3; --marca-tinta: #ffffff;
}
:root[data-cor="azul"] {
  --marca: #1462b5; --marca-escura: #0f4f93; --marca-clara: #e6f0fa; --marca-tinta: #ffffff;
}
:root[data-cor="roxo"] {
  --marca: #6b3fb5; --marca-escura: #573294; --marca-clara: #f0eafa; --marca-tinta: #ffffff;
}
:root[data-cor="grafite"] {
  --marca: #384250; --marca-escura: #2a333e; --marca-clara: #eef0f3; --marca-tinta: #ffffff;
}

/* No escuro cada tom clareia, senão o destaque some no fundo. */
:root[data-tema="escuro"][data-cor="verde-escuro"] {
  --marca: #0e8f3c; --marca-escura: #0a7531; --marca-clara: #11231a;
}
:root[data-tema="escuro"][data-cor="lima"] {
  --marca: #74bb1c; --marca-escura: #5d9816; --marca-clara: #1b2410;
}
:root[data-tema="escuro"][data-cor="azul"] {
  --marca: #3d90e8; --marca-escura: #2f76c4; --marca-clara: #111c2a;
}
:root[data-tema="escuro"][data-cor="roxo"] {
  --marca: #9670e0; --marca-escura: #7a55c2; --marca-clara: #1c1630;
}
:root[data-tema="escuro"][data-cor="grafite"] {
  --marca: #8a94a3; --marca-escura: #6f7987; --marca-clara: #1d2129;
}