/* ============================================================================
   PMS HOTEL — tokens.css (F2b.1)
   ----------------------------------------------------------------------------
   Origem: PROMPT-FRONTEND-PHP.md §5.1 (tokens), §5.2 (tipografia),
           §5.3 (espaço, formas, movimento), §6 (casca), §10 (acessibilidade).
   Decisão de 17/09/2026 (docs/DECISOES.md): CSS próprio, sem CDN, sem jQuery.

   ESTE É O ÚNICO FICHEIRO DO SISTEMA COM CORES LITERAIS (§11.8).
   Em base.css, componentes.css, ecrãs e HTML só entra var(--…).

   Modo escuro: automático por @media (prefers-color-scheme: dark), salvo quando
   o utilizador fixou o tema claro (:root[data-tema="claro"]); e forçado por
   :root[data-tema="escuro"].
   ============================================================================ */

:root {
  /* --- superfícies ------------------------------------------------------- */
  /* O fundo era um degradê esverdeado com o laranja por cima. Com a marca a
     passar a verde, o fundo tem de sair da frente: um neutro quase branco, com
     um sopro do verde da marca, para os cartões ganharem o contraste. */
  --fundo-app: #f4f6f5;
  --superficie: #ffffff;
  /* FORMA — revista a 21/09/2026.
     O que fazia o painel parecer de 2019 não era a cor: era a forma. Cartões
     de raio 20 px com uma sombra por baixo, campos em cápsula de 14 px e
     badges de 99 px — tudo arredondado e tudo a flutuar. É a linguagem dos
     SaaS de 2018-2020.

     Num sistema de trabalho, cada sombra é uma camada que o olho tem de
     resolver, e não há camada nenhuma: é tudo a mesma folha. A sombra sai e
     fica um fio; o raio desce para o que chega para o canto não cortar. A
     cápsula fica só onde é mesmo uma cápsula — os badges. */
  --sombra-cartao: none;
  --raio-cartao: 10px;
  --raio-pilula: 99px;

  /* --- tinta ------------------------------------------------------------- */
  --tinta: #1c1b18;
  --tinta-2: #3a3935;
  --tinta-secundaria: #55544d;
  /* 4.76:1 sobre --superficie. Era #8b8a83, e este ficheiro dizia-o por
     extenso: «3.46:1 sobre --superficie: falha AA a 11–13px». E falhava onde
     mais se lê — os cabeçalhos das tabelas, as notas de ajuda por baixo dos
     campos e os subtítulos dos cartões são todos texto de 12 px pintado com
     esta tinta. Escurecido a 21/09/2026 até passar AA com folga; continua
     claramente mais apagado do que a --tinta, que é o que se lhe pede. */
  --tinta-muda: #74736c;
  --tinta-desativada: #b6b5ad; /* texto desativado — isento de contraste (WCAG 1.4.3) */

  /* --- marca -------------------------------------------------------------
     MUDADA A 21/09/2026, a pedido do Manuel («mude o design completo»).
     Era o laranja #ff8a3d, decidido por ele no PH-42 a 18/09 — esta decisão
     substitui essa, e desfaz-se com um `git revert` deste commit.

     Verde-petróleo. A razão não é só de gosto: o laranja não podia levar texto
     branco por cima (2.35:1, abaixo de qualquer mínimo), e por isso o PH-42
     teve de inverter a tinta do botão para escura — um botão primário com
     texto escuro lê-se como um botão secundário. Este verde leva branco a
     6.04:1, e serve TAMBÉM como tinta sobre o branco (os mesmos 6.04:1), o que
     dispensa o tom à parte que o laranja precisava (`--primario-legivel` era um
     castanho diferente, #b35f30).

     Medido: branco sobre --primario 6.04:1 · branco sobre --primario-hover
     7.55:1 · --primario-legivel sobre --superficie 6.04:1 · --ativo-texto
     sobre --ativo-bg 6.04:1. Todos acima do AA (4.5:1). */
  --primario: #0f6f63;
  --primario-hover: #0b5f55;
  --primario-texto: #ffffff;
  --primario-legivel: #0f6f63;   /* 6.04:1 sobre --superficie */
  --ativo-bg: #0f6f63;
  --ativo-texto: #ffffff;

  /* --- semântica (badges, alertas) ---------------------------------------
     Contraste medido do par fg/bg no modo claro (WCAG 2.1, texto pequeno
     exige 4.5:1): ok 4.66 · info 5.14 · erro 4.50 · aviso 3.31 · mudo 3.01.
     O aviso e o mudo NÃO passam com 11–13px. Enquanto o §5.1 não for revisto
     (ver relatório da F2b.1), usa-os só em chip com peso 700 a partir de 14px,
     e nunca como única portadora de significado (§10). */
  --ok-bg: #dcf5e6;    --ok-fg: #1c7a42;
  --aviso-bg: #fdf3d7; --aviso-fg: #b07c14;
  --erro-bg: #fde4e1;  --erro-fg: #c0392b;
  --mudo-bg: #f0efe9;  --mudo-fg: #8b8a83;
  --info-bg: #e3ecfa;  --info-fg: #2b5fb8;

  /* --- estrutura --------------------------------------------------------- */
  --selecao-bg: #f2faf5;
  --selecao-borda: #d5d9d2;
  --barra-neutra: #e9ede7;
  --barra-ativa: linear-gradient(180deg, #5fd68f, #2e9e5b);
  --linha: #f7f6f1;
  --linha-forte: #e8e7e0;
  --borda-suave: #f0efe9;
  --hover-suave: #f7f6f1;
  --escuro: #0f1a15;
  --escuro-2: #1c1b18;

  /* --- tipografia (famílias, §5.1) --------------------------------------- */
  /* MUDADA A 21/09/2026, com a marca. Os títulos eram Comfortaa — uma letra
     arredondada, simpática, que dá ao produto ar de aplicação de telemóvel. Um
     PMS é uma ferramenta de trabalho que se olha oito horas por dia: os
     títulos passam a Manrope, a mesma do corpo, no peso mais forte. Uma só
     família, e o sistema lê-se como uma ferramenta.

     O `@font-face` da Comfortaa fica onde está (`fontes.css`): um tipo de
     letra que ninguém usa não chega a ser transferido, e assim volta numa
     linha se o Manuel preferir. */
  --fonte-titulo: 'Manrope', system-ui, -apple-system, sans-serif;
  --fonte-corpo: 'Manrope', system-ui, -apple-system, sans-serif;

  /* ==========================================================================
     Complementos ao §5.1 — derivados de §5.2, §5.3, §6 e §10.
     Nada aqui contradiz os tokens acima: só lhes dá nome ao que o documento
     escreve por extenso (escala de texto, grelha de 4px, movimento, camadas).
     ========================================================================== */

  /* --- foco visível (§10: anel de 2px com 2px de afastamento) ------------- */
  --foco: #1c1b18;
  --foco-contraste: #ffffff;

  /* --- marcação de texto (::selection) ----------------------------------- */
  --marcacao-bg: #cfeae5;
  --marcacao-fg: #10221f;

  /* --- escala de texto (§5.2) -------------------------------------------- */
  /* ESCALA — revista a 21/09/2026: o corpo era 13 px, que é pequeno para um
     ecrã que se lê oito horas por dia, e obrigava a pôr tudo a negrito para se
     ver. Sobe a 14; o resto acompanha. */
  --t-ecra: 22px;       /* título de ecrã */
  --t-cartao: 16px;     /* título de cartão */
  --t-subtitulo: 14px;  /* subtítulo */
  --t-corpo: 14px;      /* corpo e tabelas */
  --t-rotulo: 13px;     /* rótulos e notas */
  --t-chip: 12px;       /* chips, rótulos de secção, cabeçalhos de coluna */

  /* --- pesos e ritmo vertical (§5.2: 600 é o normal deste sistema) -------- */
  /* PESO — revisto a 21/09/2026.
     O corpo era 600: TODO o texto do sistema em semi-negrito. Quando tudo é
     forte, nada é forte — e a página inteira fica pesada. O corpo passa a 500
     (a Manrope a 500 lê-se bem a 14 px) e o forte a 600, que continua a
     destacar-se porque agora tem de quê. */
  --peso-corpo: 500;
  --peso-forte: 600;
  --peso-titulo: 600;
  --peso-titulo-forte: 700;
  --altura-linha-corpo: 1.55;
  --altura-linha-titulo: 1.3;
  /* As MAIÚSCULAS ESPAÇADAS de 11 px eram a assinatura mais datada do sistema:
     «TEMA», «FÓLIO», «SEM PONTO». Um rótulo diz-se como se fala. O espaçamento
     fica só para o que continuar em maiúsculas por razão própria (uma sigla). */
  --espacamento-rotulo: 0.01em;

  /* --- espaço: grelha de 4px (§5.3) -------------------------------------- */
  --e-4: 4px;
  --e-6: 6px;
  --e-8: 8px;
  --e-10: 10px;
  --e-12: 12px;
  --e-16: 16px;
  --e-20: 20px;
  --e-24: 24px;
  --e-32: 32px;

  /* --- raios e sombras --------------------------------------------------- */
  --raio-campo: 8px;
  --raio-pequeno: 6px;
  /* A janela flutua mesmo — é a única coisa que está por cima de tudo o
     resto —, por isso é a única que mantém sombra. Mais contida. */
  --sombra-flutuante: 0 12px 32px rgba(28, 27, 24, 0.14);

  /* --- movimento (§5.3: 120–160ms, ease-out) ----------------------------- */
  --duracao-rapida: 120ms;
  --duracao-normal: 160ms;
  --curva-saida: cubic-bezier(0, 0, 0.2, 1);

  /* --- camadas (§6: casca com topo, lateral, gaveta, menus, modais) ------- */
  --z-base: 0;
  --z-conteudo: 1;
  --z-lateral: 100;
  --z-topo: 200;
  --z-gaveta: 300;
  --z-menu: 400;
  --z-modal: 500;
  --z-aviso: 600;

  /* --- medidas da casca (§6 e §10) --------------------------------------- */
  --largura-conteudo: 1280px;
  /* O PAINEL NÃO É UM TEXTO: SÃO TABELAS.
     A medida de leitura (1280) é a certa para o sítio público, onde o que se
     faz é ler. No painel o que está no ecrã são listas de documentos com dez
     colunas — e num monitor de 1536 px a régua de 1280 deixava 256 px de
     margem vazia de cada lado enquanto a tabela rolava de lado lá dentro.
     Continua a haver um limite, porque uma linha com dois metros também não se
     lê: é este. */
  --largura-painel: 1760px;
  --largura-lateral: 232px;
  --largura-lateral-icones: 64px;
  --altura-topo: 56px;
  --gutter: 24px;
  --gutter-telemovel: 16px;

  /* ==========================================================================
     SÍTIO PÚBLICO — marketing, loja e checkout (F2b.1a / PH-50)
     --------------------------------------------------------------------------
     `app/index.php`, `app/assinar.php` e `app/assinatura.php` não são o
     backoffice: são a montra, e sempre foram um azul-petróleo escuro com um
     realce âmbar. Quando se tirou o `cdn.tailwindcss.com` (que trazia esta
     paleta numa `tailwind.config` inline, em hexadecimais soltos dentro do
     HTML) a paleta teve de ir para algum lado — e o sítio é o lado certo:
     aqui, com nome, e não espalhada por seis ficheiros PHP.

     Estes tokens NÃO acompanham o modo escuro. A montra já é escura por
     desenho; virá-la ao contrário com o tema do sistema operativo do visitante
     dava duas marcas diferentes conforme quem abre a página.

     Contraste medido sobre --sitio-fundo-solido (#1a2c3d):
       --sitio-tinta        21.0:1   --sitio-tinta-2     12.9:1
       --sitio-tinta-muda    7.1:1   --sitio-realce       8.8:1
     e do texto sobre os fundos de botão:
       branco sobre --sitio-verde  5.5:1   ·  sobre --sitio-azul  7.1:1
       --sitio-realce-tinta sobre --sitio-realce  11.6:1
     ========================================================================== */

  --sitio-fundo: linear-gradient(135deg, #1a2c3d 0%, #2d4c63 100%);
  --sitio-fundo-solido: #1a2c3d;
  --sitio-superficie: #1a2c3d;
  --sitio-superficie-2: #2d4c63;

  /* Painéis claros dentro da montra (a secção «Sobre nós», a barra de pesquisa
     do catálogo, o checkout). Ficam brancos em qualquer tema, pela mesma razão
     que o resto da montra fica escuro. */
  --sitio-claro: #ffffff;
  --sitio-claro-2: #f3f4f1;
  --sitio-claro-tinta: #1c1b18;
  --sitio-claro-tinta-2: #55544d;
  --sitio-claro-borda: #d9dcd6;

  /* O «vidro»: era `bg-glass` + `bg-white/10` no HTML. */
  --sitio-vidro: rgba(255, 255, 255, 0.08);
  --sitio-vidro-forte: rgba(255, 255, 255, 0.14);
  --sitio-vidro-borda: rgba(255, 255, 255, 0.16);
  --sitio-veu: rgba(0, 0, 0, 0.55);
  /* Cabeçalho fixo da montra (07/10/2026): o fundo da página, quase opaco,
     para o texto de baixo não se ler através dele ao deslizar. */
  --sitio-cabecalho: rgba(26, 44, 61, 0.94);

  --sitio-tinta: #ffffff;
  --sitio-tinta-2: #d6dee6;
  --sitio-tinta-muda: #a9b6c2;

  --sitio-borda: rgba(255, 255, 255, 0.12);
  --sitio-borda-realce: rgba(255, 193, 7, 0.30);

  /* Realce da marca (era `accent`). Como TINTA sobre o fundo escuro dá 8.8:1;
     como FUNDO leva tinta escura, nunca branca. */
  --sitio-realce: #ffc107;
  --sitio-realce-hover: #e0a800;
  --sitio-realce-tinta: #1c1b18;
  --sitio-realce-veu: rgba(255, 193, 7, 0.18);

  /* Acções. O verde da origem (#2ba304) dava 3.27:1 com texto branco e não
     passava o AA; escureceu-se para 5.5:1 — mesma família, mesmo papel, e o
     botão deixa de ser ilegível ao sol. Mesma lógica do PH-42. */
  --sitio-verde: #1d7a03;
  --sitio-verde-hover: #186503;
  --sitio-azul: #045d8a;
  --sitio-azul-hover: #034a6e;
  --sitio-accao-tinta: #ffffff;

  /* Estado dentro da montra (etiquetas de stock, avisos do carrinho). */
  --sitio-ok: #157a3d;
  --sitio-perigo: #b3261e;
  --sitio-perigo-hover: #8c1d17;

  /* --------------------------------------------------------------------------
     MONTRA PÚBLICA — redesenho de 07/10/2026 (`montra.css`, docs/design/).
     Dois mundos, cada um com a sua tinta: faixas MARINHO (herói, pedido de
     demonstração, rodapé) e faixas CLARAS (tudo o resto). O defeito do desenho
     anterior era misturar os dois: cartões claros com texto claro. Aqui cada
     par fundo/tinta vem junto e está medido (WCAG 2.2, texto normal ≥ 4.5:1):

     claras   tinta/branco 16.9 · tinta/papel-2 15.4 · tinta-2/branco 8.7 ·
              tinta-2/papel-2 7.9 · muda/branco 5.6 · muda/papel-2 5.1 ·
              realce-escuro/branco 6.6 · realce-escuro/papel-2 6.0 ·
              erro/branco 6.5 · ok/branco 6.5
     marinho  branco/marinho 16.9 · sobre-2/marinho 11.4 · sobre-muda/marinho 7.6 ·
              sobre-muda/marinho-2 6.6 · sobre-muda/marinho-3 8.0 · realce/marinho 8.3
     botão    realce-tinta/realce 8.3 · realce-tinta/realce-hover 9.7
     bordas de campo (UI, ≥ 3:1): campo-borda/branco 4.1

     O laranja só é FUNDO de botão (com tinta marinho) ou tinta sobre marinho;
     sobre claro, o texto de realce usa o tom escuro. Não acompanham o modo
     escuro do sistema, pela mesma razão do bloco `--sitio-*`. */
  --montra-marinho: #0a1e32;
  --montra-marinho-2: #102a45;
  --montra-marinho-3: #07182a;
  --montra-papel: #ffffff;
  --montra-papel-2: #f1f5f9;
  --montra-tinta: #0a1e32;
  --montra-tinta-2: #3b4d61;
  --montra-tinta-muda: #566a80;
  --montra-linha: #d3dce6;
  --montra-campo-borda: #6b7f94;
  --montra-realce: #f5a623;
  --montra-realce-hover: #ffb733;
  --montra-realce-tinta: #0a1e32;
  --montra-realce-escuro: #8a4f00;
  --montra-sobre: #ffffff;
  --montra-sobre-2: #c9d6e4;
  --montra-sobre-muda: #9db0c4;
  --montra-linha-escura: rgba(255, 255, 255, 0.16);
  --montra-ok: #146c3a;
  --montra-erro: #b3261e;
  --montra-erro-fundo: #fbeceb;
  --montra-ok-fundo: #e6f4ec;
  --montra-sombra-moldura: 0 24px 48px rgba(7, 24, 42, 0.28);
  --montra-raio: 8px;
  --montra-raio-moldura: 10px;
  --montra-medida: 1200px;

  --sitio-sombra: 0 10px 30px rgba(0, 0, 0, 0.25);
  --sitio-sombra-forte: 0 20px 35px rgba(0, 0, 0, 0.45);
  --sitio-raio: 16px;
  --sitio-raio-grande: 20px;
}

/* ============================================================================
   MODO ESCURO — automático (o utilizador não fixou o tema claro).
   ============================================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    /* superfícies — marinho (marca Kandalu, 27/09/2026) */
    --fundo-app: #071a30;
    --superficie: #0c2340;
    --sombra-cartao: none;

    /* tinta */
    --tinta: #f4f7fb;
    --tinta-2: #dce6f2;
    --tinta-secundaria: #c4d2e4;
    --tinta-muda: #8da2bd;
    --tinta-desativada: #5c7391;

    /* marca — laranja Kandalu com texto marinho. Branco sobre laranja reprova
       o contraste (2.3:1), por isso o texto do botão é escuro, como nos mockups.
       Medido: --primario-texto #0a1e32 sobre --primario #f5a623 ~8.4:1 ·
       --primario-legivel #f5a623 sobre --superficie #0c2340 ~7.1:1. */
    --primario: #f5a623;
    --primario-hover: #ffb733;
    --primario-texto: #0a1e32;
    --primario-legivel: #f5a623;
    --ativo-bg: #f5a623;
    --ativo-texto: #0a1e32;

    /* semântica */
    --ok-bg: #12331f;    --ok-fg: #34d177;
    --aviso-bg: #33280f; --aviso-fg: #f5c24a;
    --erro-bg: #3a1a1c;  --erro-fg: #f5736f;
    --mudo-bg: #152c48;  --mudo-fg: #9bb0cc;
    --info-bg: #12294a;  --info-fg: #6fa8e6;

    /* estrutura */
    --selecao-bg: #12304f;
    --selecao-borda: #1e3e63;
    --barra-neutra: #173355;
    --barra-ativa: linear-gradient(180deg, #ffb733, #f5a623);
    --linha: #173355;
    --linha-forte: #1e3e63;
    --borda-suave: #173355;
    --hover-suave: #12304f;
    --escuro: #061529;
    --escuro-2: #0a1e32;

    /* foco e marcação */
    --foco: #f4f7fb;
    --foco-contraste: #071a30;
    --marcacao-bg: #1e3e63;
    --marcacao-fg: #f4f7fb;

    /* sombras */
    --sombra-flutuante: 0 8px 24px rgba(0, 0, 0, 0.55);
  }
}

/* ============================================================================
   MODO ESCURO — forçado pelo utilizador (data-tema="escuro" no <html>).
   Mesma paleta do bloco acima; repete-se porque o CSS não permite partilhar
   um bloco entre dentro e fora de uma media query.
   ============================================================================ */

:root[data-tema="escuro"] {
  /* superfícies — marinho (marca Kandalu, 27/09/2026) */
  --fundo-app: #071a30;
  --superficie: #0c2340;
  --sombra-cartao: none;

  /* tinta */
  --tinta: #f4f7fb;
  --tinta-2: #dce6f2;
  --tinta-secundaria: #c4d2e4;
  --tinta-muda: #8da2bd;
  --tinta-desativada: #5c7391;

  /* marca — laranja Kandalu com texto marinho (o mesmo do bloco automático).
     Substitui o verde-petróleo de 21/09/2026, a pedido do Manuel (27/09/2026):
     marinho + laranja, com o texto do botão escuro porque branco sobre laranja
     reprova o contraste. */
  --primario: #f5a623;
  --primario-hover: #ffb733;
  --primario-texto: #0a1e32;
  --primario-legivel: #f5a623;
  --ativo-bg: #f5a623;
  --ativo-texto: #0a1e32;

  /* semântica */
  --ok-bg: #12331f;    --ok-fg: #34d177;
  --aviso-bg: #33280f; --aviso-fg: #f5c24a;
  --erro-bg: #3a1a1c;  --erro-fg: #f5736f;
  --mudo-bg: #152c48;  --mudo-fg: #9bb0cc;
  --info-bg: #12294a;  --info-fg: #6fa8e6;

  /* estrutura */
  --selecao-bg: #12304f;
  --selecao-borda: #1e3e63;
  --barra-neutra: #173355;
  --barra-ativa: linear-gradient(180deg, #ffb733, #f5a623);
  --linha: #173355;
  --linha-forte: #1e3e63;
  --borda-suave: #173355;
  --hover-suave: #12304f;
  --escuro: #061529;
  --escuro-2: #0a1e32;

  /* foco e marcação */
  --foco: #f4f7fb;
  --foco-contraste: #071a30;
  --marcacao-bg: #1e3e63;
  --marcacao-fg: #f4f7fb;

  /* sombras */
  --sombra-flutuante: 0 8px 24px rgba(0, 0, 0, 0.55);
}

/* Diz ao browser que ambos os esquemas existem: formulários nativos,
   barras de deslocamento e campos de data acompanham o tema. */
:root { color-scheme: light dark; }
:root[data-tema="claro"] { color-scheme: light; }
:root[data-tema="escuro"] { color-scheme: dark; }