/* =====================================================================
   PortalImob — tokens & base
   Variáveis de tema, reset, tipografia base, grão e animações globais.
   Carregado por TODOS os layouts (primeiro).
   Direção visual: dark arquitetônico / luxe · acento latão.
   ===================================================================== */

:root {
    /* Revisão 2026-09-20 (mesmo método do tema claro: consenso de Material dark theme, IBM Carbon g90/g100, Uxcel,
       LogRocket, Netguru, ColorContrast, Theme&Color): superfície base cinza-escura (≈#121212), NUNCA preto puro;
       profundidade por CAMADAS mais claras (não por sombra); texto quase branco (#E0–#F5), não branco puro (evita
       o "halo"); acento com saturação 20–30 % menor e tom mais claro; saturação reservada para significado. */
    --ink:        #131513;   /* página (≈ Material #121212 com tinta verde) */
    --ink-2:      #1b1e1b;   /* cartões: camada +1 */
    --ink-3:      #252925;   /* campos / camada +2 */
    --paper:      #f2f3ee;   /* texto: quase branco (15:1 sobre cartão); branco puro #fff saiu (2026-09-20) */
    --paper-dim:  #cfd3cb;   /* secundário: 11:1 */
    --muted:      #a4aaa1;   /* discreto: 7:1 (AAA) — cinza nunca como texto principal */
    --line:       rgba(255, 255, 255, 0.09);
    --line-2:     rgba(255, 255, 255, 0.17);
    --line-ctl:   rgba(255, 255, 255, 0.40);   /* contorno de CONTROLE (campo, pílula) com 3:1 sobre o fundo (WCAG 1.4.11) */
    --brass:      #d1b056;   /* amarelo/dourado da marca, dessaturado p/ o escuro (texto escuro em cima = 7,7:1) */
    --brass-2:    #e6c96f;   /* dourado em TEXTO (10:1) */
    --brass-soft: rgba(209, 176, 86, 0.16);
    --danger:     #e0794f;
    --radius:     16px;
    --radius-sm:  10px;
    --shadow:     0 30px 70px -30px rgba(0, 0, 0, 0.8);
    --ease:       cubic-bezier(0.22, 1, 0.36, 1);
    --display:    'Bricolage Grotesque', ui-serif, Georgia, serif;
    --body:       'Archivo', ui-sans-serif, system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: var(--body);
    color: var(--paper);
    background: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Grão sutil sobre tudo */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 999;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; }

/* Animações globais */
@keyframes rise  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes spin  { to { transform: rotate(360deg); } }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------------------------------------
   TOKENS SEMÂNTICOS (2026-09-05) — todas as cores que estavam fixas nos componentes passam a
   vir daqui, pra existir mais de um tema. Os valores abaixo são o tema ESCURO (padrão).
   ------------------------------------------------------------------------------------------ */
:root {
    --on-brass:      #2a2006;                     /* texto sobre o dourado (botões) */
    --on-brass-soft: rgba(42, 32, 6, 0.35);
    --brass-glow:    rgba(209, 176, 86, 0.45);     /* sombra dos botões principais */
    --ok:            #7fcf9a;  --ok-soft:     rgba(127, 207, 154, 0.12); --ok-line:     rgba(127, 207, 154, 0.40); /* verde da marca = sucesso */
    --warn:          #e6c766;  --warn-soft:   rgba(230, 199, 102, 0.12); --warn-line:   rgba(230, 199, 102, 0.45);
    --danger-ink:    #ef9a8a;  --danger-soft: rgba(239, 154, 138, 0.10); --danger-line: rgba(239, 154, 138, 0.40);
    --info:          #8fb8ea;  --info-soft:   rgba(143, 184, 234, 0.10); --info-line:   rgba(143, 184, 234, 0.35);
    --badge-count:   #c0392b;                     /* contador vermelho do menu */
    --soon:          #6a706a;                     /* item "em breve" */
    --row-hover:     rgba(255, 255, 255, 0.05);
    --card-bg:       rgba(255, 255, 255, 0.03);   /* cartões internos: camada mais clara, não mais escura */
    --topbar-bg:     rgba(19, 21, 19, 0.94);
    --pgctl-bg:      var(--brass-soft);           /* rodapé PageControl: topo do gradiente */
    --pgctl-bg-2:    var(--topbar-bg);            /* rodapé PageControl: base do gradiente */
    --pgctl-fg:      var(--paper-dim);            /* texto das abas (escuro: como antes) */
    --chart-1:       #b5862f;                     /* série 1 dos gráficos (ocupados) — validada p/ daltonismo sobre --ink-2 */
    --chart-2:       #5b8fd8;                     /* série 2 (desocupados) */
    /* Etapas da OS do módulo Obras (stepper) — o projeto de origem tinha hex
       espalhado nos helpers; aqui é token e segue o tema (docs/modulos/obras.md §D7). */
    --obra-aberta:     #5b8fd8;                   /* recém aberta */
    --obra-orcando:    #4bb3c9;                   /* orçando */
    --obra-autorizada: #4f9d69;                   /* autorizada */
    --obra-obra:       #d08a3a;                   /* em obra */
    --obra-vistoria:   #9b7fd4;                   /* em vistoria */
    --obra-pronta:     #4f9d69;                   /* pronta */
    --obra-parada:     #8a8f8a;                   /* cancelada/suspensa */
    --caption-bg:    #ffffff;                     /* barra de título (caption Delphi) no escuro: BRANCA (teste do usuário 2026-09-20; antes dourado claro #eed99a) */
    --caption-fg:    #111111;                     /* texto PRETO em negrito sobre a barra branca (usuário 2026-09-20) */
    --caption-fg-2:  rgba(17, 17, 17, 0.75);      /* texto secundário sobre a barra */
    --card-line:     rgba(255, 255, 255, 0.55);   /* borda dos cartões no escuro: branco translúcido (decisão do usuário 2026-09-20, "ficou bom"; antes = --line-2) */
    --overlay:       rgba(0, 0, 0, 0.6);          /* backdrop de modal/menu */
    --scrim:         rgba(0, 0, 0, 0.7);          /* degradê escuro sobre FOTO (legenda); igual nos dois temas: a foto não muda com o tema */
    --on-scrim:      #ffffff;                     /* texto sobre o --scrim */
    --shadow-2:      0 2px 8px rgba(0, 0, 0, 0.5); /* pílulas/popovers (no escuro a sombra só separa, a camada é que dá profundidade) */
    /* apelidos usados como fallback em CSS antigo (var(--border, #333) etc.): agora seguem o tema */
    --border:    var(--line);
    --fg:        var(--paper);
    --gold:      var(--brass);
    --surface:   var(--ink-2);
    --surface-2: var(--ink-3);
}

/* ------------------------------------------------------------------------------------------
   TEMA CLARO — verde discreto (decisão do usuário 2026-09-05). Mesmos nomes de token: os
   componentes não mudam. `--brass*` continua sendo "a cor de destaque" — aqui é verde-musgo.
   Escolha por usuário (`usuarios.tema`), escrita em <html data-theme="claro"> pelo layout.
   Futuro: paleta por TENANT = um <style> com estes mesmos tokens gerado da Empresa.
   ------------------------------------------------------------------------------------------ */
:root[data-theme="claro"] {
    /* Revisão 2026-09-20 (usuário: "visão sem esforço e clara"; marca Multi = verde, amarelo, branco). Consenso das
       referências consultadas (IBM Carbon white/g10, Material 3, Tailwind, Refactoring UI, AdminLTE, IxDF, UXPin):
       fundo quase branco NEUTRO (não verde), cartões brancos, campos numa camada cinza-clara, texto cinza-escuro tingido
       (nunca preto puro) com contraste >= 4,5:1, UMA cor primária (verde) só em ações/destaque e o AMARELO como realce
       (seleção, aba ativa) — nunca como texto sobre branco. */
    --ink:        #f6f7f5;   /* fundo da página: quase branco, tinta verde quase imperceptível (gray-50 / g10) */
    --ink-2:      #ffffff;   /* cartões */
    --ink-3:      #eef0ec;   /* campos / camada elevada (Carbon layer): cinza-claro, não mais verde */
    --paper:      #171d1a;   /* texto principal: cinza-escuro tingido (≈ Carbon #161616), 16:1 sobre branco */
    --texto-solido: #000000; /* preto SÓLIDO para linhas de grid que precisam de contraste máximo (2026-09-26) */
    --paper-dim:  #3a443e;   /* texto secundário: 9:1 */
    --muted:      #5e6a63;   /* texto discreto: 5,6:1 sobre branco (mínimo 4,5) */
    --line:       rgba(23, 29, 26, 0.10);
    --line-2:     rgba(23, 29, 26, 0.20);
    --line-ctl:   rgba(23, 29, 26, 0.50);      /* contorno de CONTROLE com 3:1 sobre o fundo claro */
    --brass:      #2e7d4f;   /* primário: verde da marca em tom acessível (branco em cima = 4,7:1) */
    --brass-2:    #1f6a3f;   /* verde em TEXTO (6,3:1 sobre branco) */
    --brass-soft: rgba(246, 201, 32, 0.24);  /* AMARELO da marca como realce: seleção, aba ativa, hover forte */
    --danger:     #b8432f;
    --shadow:     0 30px 70px -30px rgba(23, 29, 26, 0.22);
    --on-brass:      #ffffff;
    --on-brass-soft: rgba(255, 255, 255, 0.45);
    --brass-glow:    rgba(246, 201, 32, 0.45); /* brilho dos botões principais: amarelo */
    --ok:            #2e7d4f;  --ok-soft:     rgba(46, 125, 79, 0.10);  --ok-line:     rgba(46, 125, 79, 0.40);
    --warn:          #8a5b00;  --warn-soft:   rgba(246, 201, 32, 0.18); --warn-line:   rgba(200, 150, 0, 0.55);
    --danger-ink:    #b8432f;  --danger-soft: rgba(184, 67, 47, 0.10);  --danger-line: rgba(184, 67, 47, 0.40);
    --info:          #2f6fa3;  --info-soft:   rgba(47, 111, 163, 0.10); --info-line:   rgba(47, 111, 163, 0.35);
    --badge-count:   #c0392b;
    --soon:          #9aa39d;
    --row-hover:     rgba(246, 201, 32, 0.10);  /* hover de linha: amarelo bem leve */
    --card-bg:       rgba(23, 29, 26, 0.03);
    --topbar-bg:     rgba(255, 255, 255, 0.94);
    --pgctl-bg:      #b3cfbf;                     /* PageControl no claro: verde-musgo a ~35% sobre branco (pedido 2026-09-20: +30% mais escuro) */
    --pgctl-bg-2:    #c4dbcd;                     /* base do gradiente, ~30% */
    --pgctl-fg:      #1c3a38;                     /* texto das abas no claro: petróleo escuro, negrito (pedido 2026-09-20; branco ficou fraco) */
    --chart-1:       #2c7a4b;                     /* série 1 dos gráficos (ocupados) no claro */
    --chart-2:       #2563eb;                     /* série 2 (desocupados) no claro */
    /* Etapas da OS (Obras) no tema claro: mesmos matizes, tom com contraste sobre branco */
    --obra-aberta:     #2563eb;
    --obra-orcando:    #0e7490;
    --obra-autorizada: #15803d;
    --obra-obra:       #b45309;
    --obra-vistoria:   #6d28d9;
    --obra-pronta:     #15803d;
    --obra-parada:     #4b5563;
    --caption-bg:    var(--brass);                 /* barra de título no claro: verde da marca, texto branco */
    --caption-fg:    #ffffff;
    --caption-fg-2:  rgba(255, 255, 255, 0.78);
    --card-line:     #22c55e;                     /* borda dos cartões em verde brilhante (decisão do usuário 2026-09-20, "ficou perfeito": o cinza-claro não destacava) */
    --overlay:       rgba(23, 29, 26, 0.35);
    --shadow-2:      0 2px 8px rgba(23, 29, 26, 0.16);
    color-scheme: light;
}

/* =====================================================================
   ACESSIBILIDADE por usuário (Shared\Ui\Acessibilidade, usuário 2026-09-26) — atributos `data-a11y-*` no <html>,
   postos pelo app.php; sem atributo = padrão. Ficam AQUI (1º CSS) porque só trocam base/tokens.
   ===================================================================== */
/* Tamanho: quase todo o CSS é em rem, então a base do <html> escala o sistema inteiro na proporção (texto, campos,
   botões, grids) — como um zoom, sem quebrar layout. */
:root[data-a11y-tam="112"] { font-size: 112.5%; }
:root[data-a11y-tam="125"] { font-size: 125%; }
:root[data-a11y-tam="140"] { font-size: 140%; }
/* Fonte: a de texto e a de títulos passam a ser a escolhida (Atkinson Hyperlegible = Braille Institute, baixa visão) */
:root[data-a11y-fonte="atkinson"] { --body: 'Atkinson Hyperlegible', ui-sans-serif, system-ui, sans-serif; --display: var(--body); }
:root[data-a11y-fonte="lexend"]   { --body: 'Lexend', ui-sans-serif, system-ui, sans-serif; --display: var(--body); }
:root[data-a11y-fonte="sistema"]  { --body: 'Segoe UI', system-ui, -apple-system, sans-serif; --display: var(--body); }
/* Contraste ALTO: texto principal/secundário/discreto no máximo e linhas mais fortes — nos dois temas */
:root:not([data-theme="claro"])[data-a11y-contraste="alto"] {
    --paper: #ffffff; --paper-dim: #f0f1ec; --muted: #d8dcd4;
    --line: rgba(255, 255, 255, 0.22); --line-2: rgba(255, 255, 255, 0.38); --line-ctl: rgba(255, 255, 255, 0.65);
}
:root[data-theme="claro"][data-a11y-contraste="alto"] {
    --paper: #000000; --paper-dim: #111511; --muted: #2f3531;
    --line: rgba(0, 0, 0, 0.22); --line-2: rgba(0, 0, 0, 0.38); --line-ctl: rgba(0, 0, 0, 0.7);
}
/* Texto ENCORPADO: um contorno fino na cor do próprio texto engrossa TODA letra, qualquer que seja o peso da regra */
:root[data-a11y-negrito="1"] body { -webkit-text-stroke: 0.35px currentColor; }