/* Quantum Care Organic v2.0 — camada semântica.
   Fonte de valores: organic-base.css (rampas do sistema Organic).
   Este arquivo dá nome de marca aos papéis. Nunca escrever HEX aqui:
   todo valor vem de uma variável --color-* / --space-* / --radius-*.
   Ordem de carregamento: fontes.css -> organic-base.css -> quantum-care.css */

:root{
  /* Superfícies */
  --qc-fundo:            var(--color-bg);          /* creme #f5ead8 */
  --qc-superficie:       var(--color-surface);     /* areia #ebddc5 */
  --qc-superficie-alta:  var(--color-neutral-100); /* cartão/documento */

  /* Texto */
  --qc-texto:            var(--color-text);
  --qc-texto-secundario: var(--color-neutral-700);

  /* Linhas */
  --qc-borda:            var(--color-neutral-300);
  --qc-borda-essencial:  var(--color-neutral-700);
  --qc-divisor:          var(--color-divider);

  /* Ação e foco — terracota profundo, para contraste de texto */
  --qc-acao:             var(--color-accent-700);
  --qc-acao-hover:       var(--color-accent-800);
  --qc-acao-ativo:       var(--color-accent-900);
  --qc-sobre-acao:       var(--color-neutral-100);
  --qc-link:             var(--color-accent-700);
  --qc-foco:             var(--color-accent-700);

  /* Identificação de produto — sálvia (papel antes ocupado pelo violeta) */
  --qc-identificacao:        var(--color-accent-2-700);
  --qc-identificacao-fundo:  var(--color-accent-2-200);
  --qc-identificacao-texto:  var(--color-accent-2-800);

  /* Erro de validação — decisão local de 13/09/2026, não é semântica genérica
     homologada. Usa o degrau 800 do acento, sempre com ícone e texto (R2.11). */
  --qc-erro: var(--color-accent-800);

  /* Mensagens de interface — decisão de 16/10/2026. Quatro tipos montados só
     com as rampas existentes, sem matiz novo. A diferença entre eles não depende
     da cor: cada mensagem leva ícone próprio, título em texto e forma própria
     (preenchida ou contornada). Não substituem os quatro status regulatórios.
     Contrastes medidos sobre os HEX dos tokens:
       sucesso  texto 9,12:1 · ícone 5,99:1
       erro     texto 8,37:1
       atenção  texto 11,85:1 sobre creme, 10,54:1 sobre areia ·
                ícone e borda 5,72:1 sobre creme
       info     texto 11,48:1 · ícone 5,36:1 */
  --qc-sucesso-texto:  var(--color-accent-2-800);
  --qc-sucesso-fundo:  var(--color-accent-2-100);
  --qc-sucesso-icone:  var(--color-accent-2-700);

  --qc-erro-texto:     var(--color-accent-800);
  --qc-erro-fundo:     var(--color-accent-200);

  --qc-atencao-texto:  var(--color-neutral-900);
  --qc-atencao-fundo:  transparent;
  --qc-atencao-borda:  var(--color-accent-700);
  --qc-atencao-icone:  var(--color-accent-700);

  --qc-info-texto:     var(--color-neutral-900);
  --qc-info-fundo:     var(--color-neutral-200);
  --qc-info-icone:     var(--color-neutral-700);

  /* Dados — séries categóricas. Máximo três; acima disso, pequenos múltiplos. */
  --qc-dados-1: var(--color-accent-500);
  --qc-dados-2: var(--color-accent-2-500);
  --qc-dados-3: var(--color-neutral-600);
  --qc-dados-borda-1: var(--color-accent-700);
  --qc-dados-borda-2: var(--color-accent-2-700);
  --qc-dados-borda-3: var(--color-neutral-800);

  /* Dados — escala sequencial de cinco passos, um só matiz */
  --qc-dados-seq-1: var(--color-accent-200);
  --qc-dados-seq-2: var(--color-accent-300);
  --qc-dados-seq-3: var(--color-accent-500);
  --qc-dados-seq-4: var(--color-accent-700);
  --qc-dados-seq-5: var(--color-accent-900);
}

/* Ajuste de componente da marca.
   O kit Organic preenche o botão primário com --color-accent (3,03:1 sobre o
   creme), insuficiente para texto. A marca usa o degrau 700: 6,22:1. */
.btn-primary{background:var(--qc-acao);color:var(--qc-sobre-acao);border-color:var(--qc-acao)}
.btn-primary:hover{background:var(--qc-acao-hover);border-color:var(--qc-acao-hover)}
.btn-primary:active{background:var(--qc-acao-ativo);border-color:var(--qc-acao-ativo)}
.btn-ghost{color:var(--qc-acao)}
.tag-outline{border-color:var(--qc-acao);color:var(--qc-acao)}

/* Mensagem de interface. Marcação:
   <div class="mensagem mensagem-sucesso" role="status">
     <svg ...ícone circle-check...></svg>
     <div><p class="mensagem-titulo">Senha alterada</p>
          <p>O próximo acesso já usa a senha nova.</p></div>
   </div>
   Ícone por tipo: sucesso circle-check · erro circle-alert ·
   atenção triangle-alert · info info. role="alert" só para erro.
   Sucesso, erro e info são preenchidos; atenção é contornada. */
.mensagem{display:flex;align-items:flex-start;gap:var(--space-3);
  padding:var(--space-4) var(--space-6);border-radius:var(--radius-md);
  border:2px solid transparent;font-size:14px;line-height:1.5}
.mensagem>svg{flex:0 0 auto;width:20px;height:20px;margin-top:1px}
.mensagem p{margin:0}
.mensagem p+p{margin-top:var(--space-1)}
.mensagem .mensagem-titulo{font-weight:700}
.mensagem a{color:inherit;font-weight:600}
.mensagem-sucesso{background:var(--qc-sucesso-fundo);color:var(--qc-sucesso-texto)}
.mensagem-sucesso>svg{color:var(--qc-sucesso-icone)}
.mensagem-erro{background:var(--qc-erro-fundo);color:var(--qc-erro-texto)}
.mensagem-atencao{background:var(--qc-atencao-fundo);color:var(--qc-atencao-texto);border-color:var(--qc-atencao-borda)}
.mensagem-atencao>svg{color:var(--qc-atencao-icone)}
.mensagem-info{background:var(--qc-info-fundo);color:var(--qc-info-texto)}
.mensagem-info>svg{color:var(--qc-info-icone)}