/* =========================================================================
   DRE 360 — tema: cores, medidas e fontes, em claro e escuro.
   Carregar antes de app.css. As telas usam só var(--...), nunca cor literal.
   A escolha do tema fica em data-tema no <html> (lib/tema.php).
   ========================================================================= */

:root {
    /* superfícies — papel claro, levemente azulado */
    --bg: #f3f6f8;
    --sf: #ffffff;
    --sf-2: #f0f4f7;
    --sf-3: #e4ebf0;
    --hover: #eef4f8;
    --input: #ffffff;

    /* linhas */
    --ln: #dfe6eb;
    --ln-forte: #c5d0d8;

    /* texto */
    --t1: #122029;
    --t2: #3b4b56;
    --t3: #677884;
    --t4: #98a6b0;

    /* marca — azul-petróleo: a cor do DRE 360 */
    --marca: #17647f;
    --marca-2: #0f4e66;
    --marca-sv: #e3f1f6;
    --marca-bd: #b3d6e3;
    --marca-txt: #ffffff;
    --destaque: #d9822b;          /* laranja-âmbar, usado com parcimônia (contadores, realces) */
    --destaque-sv: #fcefe0;

    /* tinta — a cor de ação (botões principais, abas ativas) */
    --tinta: var(--marca);
    --tinta-2: var(--marca-2);
    --tinta-txt: var(--marca-txt);

    /* estados */
    --ok: #1f7a4c;       --ok-sv: #e5f4ec;   --ok-bd: #b5dcc6;
    --er: #b23a2c;       --er-sv: #fbece9;   --er-bd: #efc5bd;
    --av: #9a5b0b;       --av-sv: #fcf2e0;   --av-bd: #eed3a4;
    --info: #2862a3;     --info-sv: #e7f0fa; --info-bd: #bcd2ec;

    /* profundidade */
    --sombra-1: 0 1px 2px rgba(18, 32, 41, .05);
    --sombra-2: 0 10px 30px rgba(18, 32, 41, .10);
    --sombra-3: 0 22px 56px rgba(18, 32, 41, .22);
    --veu: rgba(12, 22, 30, .45);
    --foco: rgba(23, 100, 127, .18);
    --topo-faixa: linear-gradient(90deg, var(--marca) 0%, #2a8aa8 60%, var(--destaque) 100%);

    /* fontes */
    --sans: "Instrument Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
    --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

    /* medidas */
    --r: 5px;
    --r-lg: 8px;
    --h-topo: 55px;
    --h-abas: 40px;
    --gaveta: 288px;
    --transicao: 120ms cubic-bezier(.4, 0, .2, 1);

    color-scheme: light;
}

/* ------------------------------------------------------------ tema escuro
   Vale quando a pessoa escolhe "escuro", ou quando deixa "automático" e o
   aparelho está no modo escuro. A escolha fica em data-tema no <html>. */
:root[data-tema="escuro"] {
    --bg: #0e161c;
    --sf: #141f27;
    --sf-2: #19262f;
    --sf-3: #213039;
    --hover: #1c2a34;
    --input: #101a21;
    --ln: #243440;
    --ln-forte: #344855;
    --t1: #e4ecf1;
    --t2: #b3c2cc;
    --t3: #8595a1;
    --t4: #5d6d79;
    --marca: #4fb0d1;
    --marca-2: #6cc2de;
    --marca-sv: #142f3b;
    --marca-bd: #245068;
    --marca-txt: #06141b;
    --destaque: #f0a256;
    --destaque-sv: #33230f;
    --ok: #5ccb8e;       --ok-sv: #12281c;   --ok-bd: #22493a;
    --er: #f2826f;       --er-sv: #33191a;   --er-bd: #5b2c28;
    --av: #e7b15a;       --av-sv: #2f2410;   --av-bd: #5a4420;
    --info: #7cb0ef;     --info-sv: #14233a;   --info-bd: #284469;
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .35);
    --sombra-2: 0 10px 30px rgba(0, 0, 0, .40);
    --sombra-3: 0 22px 56px rgba(0, 0, 0, .55);
    --veu: rgba(3, 8, 12, .65);
    --foco: rgba(79, 176, 209, .25);
    --topo-faixa: linear-gradient(90deg, var(--marca) 0%, #3d8fb0 60%, var(--destaque) 100%);
    color-scheme: dark;
}

/* =========================================================================
   TEMA CLARO / ESCURO — botão (lib/tema.php)
   ========================================================================= */
.btn-tema {
    width: 30px; height: 30px; border: 1px solid var(--ln-forte); border-radius: 50%;
    background: var(--sf-2); color: var(--t2);
    display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; padding: 0;
}
.btn-tema:hover { color: var(--marca); border-color: var(--marca-bd); background: var(--marca-sv); }
.btn-tema svg { display: none; }
:root[data-tema-escolha="claro"] .btn-tema .t-claro,
:root[data-tema-escolha="escuro"] .btn-tema .t-escuro,
:root[data-tema-escolha="auto"] .btn-tema .t-auto { display: block; }

/* detalhes do escuro que os tokens sozinhos não resolvem */
:root[data-tema="escuro"] select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238595a1' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
:root[data-tema="escuro"] ::-webkit-scrollbar-thumb { background: var(--ln-forte); }
body, .topo, .abas, .regua, .cartao, .tabela-caixa, .gaveta, .btn, input, select, textarea {
    transition-property: background-color, border-color, color, box-shadow;
    transition-duration: 160ms;
}