/* Opus, marca "Quatro Quartos": tokens de cor, tipo e marca. PROPOSTA, revisão 2 (21/10/2026).
   A identidade vigente continua a Ligadura Opus até aprovação do fundador.
   Contrastes calculados por tools/contraste.mjs e registrados em provas/contrastes.md.
   Regras normativas (não são comentário, são contrato):
     1. Vinho é só marca, símbolo e capa. Nunca estado, botão ou aviso.
     2. Estado nunca só por cor: todo erro, prazo e êxito leva ícone e texto (classes .opus-erro/.opus-prazo/.opus-exito
        exigem um elemento [data-icone] e texto; ver o seletor de verificação no fim do arquivo).
     3. No tema escuro, a marca e o símbolo são sempre o negativo (Cal): --cor-marca e --cor-simbolo mudam com o tema;
        Vinho sobre Breu/Grafite (1,55:1) é proibido e só aparece como superfície de capa com texto Cal. */

:root {
  /* paleta base (tema claro, padrão) */
  --opus-concreto: #E3E2DF;   /* página */
  --opus-cal:      #F6F5F2;   /* superfície: cartão, campo, painel */
  --opus-grafite:  #1E1D1B;   /* texto, títulos, ação principal, foco */
  --opus-ferro:    #5C5B57;   /* texto secundário (5,25:1 em Concreto) */
  --opus-aco:      #7E7C78;   /* bordas de campo e cartão (3,22:1 em Concreto, 3,82:1 em Cal) */
  --opus-vinho:    #7D0C14;   /* MARCA: palavra, símbolo, capas. Nunca estado. */
  --opus-urucum:   #B4220C;   /* erro e bloqueio (5,11:1 em Concreto, 6,07:1 em Cal). Rev. 2: era #B5340F (4,68:1) */
  --opus-ocre:     #7E5300;   /* prazo e atenção (5,19:1 em Concreto) */
  --opus-mata:     #1F5A3A;   /* êxito, aceite, concluído (6,28:1 em Concreto) */

  /* papéis semânticos */
  --cor-pagina: var(--opus-concreto);
  --cor-superficie: var(--opus-cal);
  --cor-texto: var(--opus-grafite);
  --cor-texto-secundario: var(--opus-ferro);
  --cor-borda: var(--opus-aco);
  --cor-foco: var(--opus-grafite);               /* anel de foco: 3 px, independente do Vinho */
  --cor-acao: var(--opus-grafite);               /* botão principal: fundo Grafite, rótulo Cal */
  --cor-acao-texto: var(--opus-cal);
  --cor-proxima-acao: var(--opus-grafite);       /* próxima ação: texto Grafite + marcador do módulo Quarto em Grafite */
  --cor-marcador-modulo: var(--opus-grafite);
  --cor-erro: var(--opus-urucum);
  --cor-erro-texto-sobre: var(--opus-cal);       /* Cal sobre faixa Urucum: 6,07:1 */
  --cor-prazo: var(--opus-ocre);
  --cor-exito: var(--opus-mata);
  --cor-marca: var(--opus-vinho);                /* a palavra */
  --cor-simbolo: var(--opus-vinho);              /* o "o" solto (avatar, selo); muda para Cal no escuro */
  --cor-simbolo-azulejo: var(--opus-vinho);      /* favicon e ícones: azulejo Vinho com anel Cal, igual nos dois temas */
  --cor-simbolo-anel: var(--opus-cal);
  --cor-capa: var(--opus-vinho);                 /* fundo de capa e tela de passagem; texto em Cal */
  --cor-capa-texto: var(--opus-cal);

  /* tipografia */
  --fonte: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --largura-capa: 125%;       /* só capas e títulos >= 28 px */
  --largura-titulo: 112%;     /* títulos de produto < 28 px */
  --largura-texto: 100%;      /* corrente, tabelas, formulários */
  --largura-rotulo: 106%;     /* rótulos e botões */
  --texto-corrente: 17px;     /* entrelinha 1,5 */
  --texto-secundario: 13px;   /* nunca abaixo disto */
  --texto-rotulo: 14px;
  --titulo-produto: 24px;     /* entrelinha 1,15, peso 600, largura 112 */
  --titulo-capa: 44px;        /* peso 800, largura 125, tracking -0,02 em, entrelinha 0,95 */
  --tracking-capa: -0.02em;

  /* marca: medidas em hastes (1 haste = 1/5 da altura de x da palavra) */
  --marca-protecao: 1;        /* hastes em volta da caixa da palavra */
  --marca-minimo-ui: 36px;    /* largura mínima da palavra em barras de navegação e rodapé (24 px é o mínimo absoluto, só com aprovação caso a caso) */
  --marca-minimo-absoluto: 24px;
  --marca-minimo-tela: 48px;  /* largura mínima da palavra em tela */
  --marca-minimo-descritor: 160px; /* largura mínima do lockup com descritor */
  --simbolo-minimo: 16px;
  --marca-ratio: 3.172;       /* largura / altura da caixa da palavra (22,46 / 7,08 hastes) */

  /* movimento (ADR da marca: o assentamento) */
  --assentar-duracao: 160ms;
  --assentar-curva: cubic-bezier(0.2, 0.8, 0.2, 1);
  --passagem-duracao: 360ms;  /* só em login, aceite e encerramento */
}

/* tema escuro: variantes claras dos sinais; marca e símbolo passam a Cal; Vinho só como superfície de capa */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --opus-breu:   #1E1D1B;
    --opus-carvao: #2B2A28;
    --opus-cinza:  #B9B7B2;
    --opus-aco-claro: #8C8A85;
    --opus-urucum-claro: #F27A70;   /* rev. 2: era #F2865F (laranja, confundia com o prazo) */
    --opus-ocre-claro:   #E3C35A;   /* rev. 2: era #E0A43B (âmbar); agora amarelo, matiz 46 */
    --opus-mata-claro:   #6CC497;

    --cor-pagina: var(--opus-breu);
    --cor-superficie: var(--opus-carvao);
    --cor-texto: var(--opus-cal);
    --cor-texto-secundario: var(--opus-cinza);
    --cor-borda: var(--opus-aco-claro);          /* 4,16:1 em Carvão, 4,88:1 em Breu */
    --cor-foco: var(--opus-cal);
    --cor-acao: var(--opus-cal);                 /* botão principal invertido: fundo Cal, rótulo Breu */
    --cor-acao-texto: var(--opus-breu);
    --cor-proxima-acao: var(--opus-cal);
    --cor-marcador-modulo: var(--opus-cal);
    --cor-erro: var(--opus-urucum-claro);        /* 6,25:1 em Breu, 5,32:1 em Carvão */
    --cor-erro-texto-sobre: var(--opus-breu);
    --cor-prazo: var(--opus-ocre-claro);         /* 9,80:1 em Breu */
    --cor-exito: var(--opus-mata-claro);         /* 8,01:1 em Breu */
    --cor-marca: var(--opus-cal);                /* marca negativa, obrigatória */
    --cor-simbolo: var(--opus-cal);              /* símbolo negativo, obrigatório */
    --cor-capa: var(--opus-vinho);
    --cor-capa-texto: var(--opus-cal);
  }
}
:root[data-theme="dark"] {
  --opus-breu:   #1E1D1B;
  --opus-carvao: #2B2A28;
  --opus-cinza:  #B9B7B2;
  --opus-aco-claro: #8C8A85;
  --opus-urucum-claro: #F27A70;
  --opus-ocre-claro:   #E3C35A;
  --opus-mata-claro:   #6CC497;

  --cor-pagina: var(--opus-breu);
  --cor-superficie: var(--opus-carvao);
  --cor-texto: var(--opus-cal);
  --cor-texto-secundario: var(--opus-cinza);
  --cor-borda: var(--opus-aco-claro);
  --cor-foco: var(--opus-cal);
  --cor-acao: var(--opus-cal);
  --cor-acao-texto: var(--opus-breu);
  --cor-proxima-acao: var(--opus-cal);
  --cor-marcador-modulo: var(--opus-cal);
  --cor-erro: var(--opus-urucum-claro);
  --cor-erro-texto-sobre: var(--opus-breu);
  --cor-prazo: var(--opus-ocre-claro);
  --cor-exito: var(--opus-mata-claro);
  --cor-marca: var(--opus-cal);
  --cor-simbolo: var(--opus-cal);
  --cor-capa: var(--opus-vinho);
  --cor-capa-texto: var(--opus-cal);
}

/* fontes: subsets variáveis (latim completo para pt-BR), eixos wght 100-900 e wdth 62-125 preservados */
@font-face {
  font-family: "Archivo";
  src: url("fontes/Archivo-VF-latim.woff2") format("woff2"), url("fontes/Archivo-VF.ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("fontes/Archivo-Italic-VF-latim.woff2") format("woff2"), url("fontes/Archivo-Italic-VF.ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
}

/* favicon: declarar no HTML nesta ordem. O .ico (16 + 32, ajustado a pixel) é o padrão; o SVG (viewBox 16,
   proporcional, cai exato em 16/32/64) é o complemento; o PNG 180 é o apple-touch-icon.
   <link rel="icon" href="/favicon.ico" sizes="16x16 32x32">
   <link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">
   <link rel="apple-touch-icon" href="/icone-180.png">
   <link rel="manifest" href="/manifest.webmanifest">   (icone-512.png, purpose "any maskable") */

/* exemplos de aplicação dos papéis */
.opus-titulo-capa { font-family: var(--fonte); font-stretch: var(--largura-capa); font-weight: 800; font-size: var(--titulo-capa); line-height: 0.95; letter-spacing: var(--tracking-capa); }
.opus-titulo { font-family: var(--fonte); font-stretch: var(--largura-titulo); font-weight: 600; font-size: var(--titulo-produto); line-height: 1.15; }
.opus-texto { font-family: var(--fonte); font-stretch: var(--largura-texto); font-weight: 400; font-size: var(--texto-corrente); line-height: 1.5; color: var(--cor-texto); font-variant-numeric: tabular-nums; }
.opus-campo { background: var(--cor-superficie); color: var(--cor-texto); border: 1px solid var(--cor-borda); }
.opus-campo:focus-visible { outline: 3px solid var(--cor-foco); outline-offset: 1px; }
.opus-campo[aria-invalid="true"] { border-color: var(--cor-erro); box-shadow: inset 0 0 0 1px var(--cor-erro); }
.opus-botao-principal { background: var(--cor-acao); color: var(--cor-acao-texto); }
.opus-proxima-acao { color: var(--cor-proxima-acao); } /* acompanha o marcador do módulo (quarto de anel) na mesma cor */
.opus-marca { color: var(--cor-marca); }     /* a palavra, como SVG inline com fill="currentColor" */
.opus-simbolo { color: var(--cor-simbolo); } /* o "o" solto, idem; no escuro vira Cal automaticamente */
.opus-erro { color: var(--cor-erro); }
.opus-prazo { color: var(--cor-prazo); }
.opus-exito { color: var(--cor-exito); }

/* regra 2 imposta no CSS: um sinal sem ícone (filho [data-icone]) recebe uma marca visível de violação
   em desenvolvimento. Em produção, o lint de UI deve falhar no mesmo seletor. */
:is(.opus-erro, .opus-prazo, .opus-exito):not(:has([data-icone])) { outline: 2px dashed var(--cor-erro); outline-offset: 2px; }
:is(.opus-erro, .opus-prazo, .opus-exito):not(:has([data-icone]))::after { content: " (sem ícone: viola a regra 2)"; }