/* Albergue — shared design tokens
   Load this ONCE em base.html, antes de qualquer outra folha de estilo.
   Todos os tokens partilhados vivem aqui — nenhuma folha de página deve
   voltar a declarar :root.

   Adaptado de abrigo-tokens.css (Abrigo, Pioneiros — indigo/azul, H 290 em
   oklch). O Albergue é dedicado aos Caminheiros, mas a cor de marca das
   AÇÕES é verde (dado: #1B6043) — usar o encarnado dos Caminheiros como cor
   de ação primária lia mal (associa-se a paragem/erro). O encarnado
   fica reservado a: identidade da categoria Caminheiro, o botão Cancelar, e
   o símbolo do Albergue.

   v2 — revisão a pedido: primary passa de encarnado a verde; danger passa a
   laranja (#E4793D); símbolo atualizado com a cor real do ícone oficial
   (cam_vara.png, a vara bifurcada). Ver docs/design/esquema-de-cores.md.
*/

:root {
  /* Neutrals — sub-tom ligado ao novo primary (verde, H 161), tal como no
     Abrigo os neutros seguiam o indigo. Chroma muito baixo: continuam a ler-
     se como cinzentos, só com um travo quente/verde subtilíssimo. */
  --color-bg: oklch(96% 0.016 161);
  --color-surface: oklch(99% 0.008 161);
  --color-text: oklch(20% 0.02 161);
  --color-text-soft: oklch(46% 0.02 161);
  --color-text-faint: oklch(62% 0.02 161);
  --color-border: oklch(90% 0.018 161);

  /* Brand / ações primárias — verde.
     oklch(43.8% 0.084 161.4) reproduz exatamente o #1B6043 dado; contraste
     de 7.4:1 contra branco, folgado para uso como fundo com texto branco
     (topbar, botões, contadores) e como texto sobre fundo claro. */
  --color-primary: oklch(43.8% 0.084 161.4);
  --color-primary-dark: oklch(31% 0.067 161.4);
  --color-primary-light: oklch(90% 0.045 161.4);

  /* Símbolo do Albergue: a vara bifurcada (cam_vara.png). Cor extraída do
     próprio PNG oficial — é literalmente o tom de referência que deste no
     pedido original (#E0494A). Tal como --color-simbolo no Abrigo (o azul da
     rosa dos ventos, extraído de pio_rosa dos ventos.png), este token é a
     cor do ícone tal como desenhado, independente da paleta funcional da UI. */
  --color-simbolo: #E0494A;

  /* Categoria de elemento (Caminheiro / Animador).
     Caminheiro fica com o encarnado — é a cor de identidade da secção, já
     não a de ação primária. Reaproveitado também pelo botão Cancelar (ver
     `.btn--cancelar` abaixo): com o verde a assumir "confirmar/avançar" e o
     laranja a assumir "destrutivo", o encarnado sobra livre para "recuar",
     que é exatamente o papel do Cancelar.

     Animador passa a herdar o MESMO verde do primary (a pedido — deixa de
     ter o verde-oliva próprio que tinha no Abrigo, H 152). É um alias, não
     um cálculo novo: resolve de vez a sobreposição de matiz que havia entre
     os dois verdes (só 9° de distância). */
  --color-categoria-caminheiro: oklch(58% 0.187 24);
  --color-categoria-caminheiro-dark: oklch(41% 0.15 24);
  --color-categoria-caminheiro-light: oklch(90% 0.045 24);
  --color-categoria-animador: var(--color-primary);
  --color-categoria-animador-dark: var(--color-primary-dark);
  --color-categoria-animador-light: var(--color-primary-light);

  /* Danger / ações destrutivas.
     oklch(68.7% 0.152 47.6) reproduz o #E4793D dado. É um laranja claro: só
     2.96:1 de contraste contra branco, abaixo do 3:1 mínimo mesmo para
     componentes de UI — não pode levar texto branco por cima, tal como o
     lima e o âmbar do Abrigo. Segue o mesmo padrão: usar com -ink (texto
     escuro) quando é fundo. -dark é um laranja bem mais profundo, para os
     casos que precisam mesmo de texto branco (ex.: hover do botão Apagar). */
  --color-danger: oklch(68.7% 0.152 47.6);
  --color-danger-ink: oklch(18% 0.04 47.6);
  --color-danger-dark: oklch(44% 0.152 47.6);

  /* Accents — inalterados face ao Abrigo. */
  --color-accent-lime: oklch(82% 0.19 130);
  --color-accent-lime-ink: oklch(25% 0.05 130);
  --color-accent-pink: oklch(68% 0.19 350);
  --color-accent-pink-light: oklch(93% 0.05 350);
  --color-accent-pink-ink: oklch(25% 0.05 350);
  --color-accent-pink-dark: oklch(46% 0.16 350);
  --color-accent-amber: oklch(78% 0.16 70);
  --color-accent-amber-ink: oklch(28% 0.06 70);
  --color-accent-amber-light: oklch(93% 0.05 70);

  /* Oportunidade / etapa state spectrum.
     "validado" volta a acompanhar o primary — e com o primary agora verde,
     esta ligação passa a fazer ainda mais sentido semântico (validado =
     verde = concluído) do que fazia com o indigo do Abrigo. a-caminho, a-
     validar e aprovado mantêm-se: são estados semânticos à parte da marca. */
  --state-nao-iniciado-bg: oklch(92% 0.01 161);
  --state-nao-iniciado-ink: oklch(50% 0.02 161);
  --state-a-caminho-bg: oklch(90% 0.06 230);
  --state-a-caminho-ink: oklch(40% 0.12 230);
  --state-a-validar-bg: oklch(93% 0.05 350);
  --state-a-validar-ink: oklch(46% 0.16 350);
  --state-validado-bg: oklch(90% 0.045 161.4);
  --state-validado-ink: oklch(31% 0.067 161.4);
  --state-aprovado-bg: oklch(88% 0.1 130);
  --state-aprovado-ink: oklch(25% 0.05 130);

  /* Áreas de desenvolvimento (FACEIS) — a cor de cada área na Roda do Leme.
     Não são cores de marca nem da paleta funcional: são as cores **oficiais**
     do Caderno de Pista do Caminheiro, amostradas da roda impressa na p. 6, e
     é por elas que os Caminheiros reconhecem cada área. Ficam literais, como
     --color-simbolo fica, pela mesma razão: é a cor tal como o CNE a imprime,
     não uma escolha da interface.

     Só o tom cheio é declarado. A banda clara e a tinta dos rótulos derivam
     dele por color-mix onde são usadas (roda_do_leme.css) — uma segunda lista
     de doze valores acabaria por divergir da primeira. Ver
     docs/specs/ProgressoPessoal/roda-do-leme.md, R10/D5. */
  --area-1: #70B33F;  /* Físico      */
  --area-2: #E4343F;  /* Afetivo     */
  --area-3: #6070B0;  /* Carácter    */
  --area-4: #AA5D98;  /* Espiritual  */
  --area-5: #F3A339;  /* Intelectual */
  --area-6: #F4E53B;  /* Social      */

  /* Type */
  --font-title: 'Sora', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;

  /* Shape / elevation */
  --radius: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --shadow-soft: 0 12px 40px -14px rgba(10, 40, 30, .3);

  /* Motion */
  --transicao-tempo: .2s ease;
  --transicao: all var(--transicao-tempo);

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-dark); }

/* Botão Cancelar — encarnado, não laranja: cancelar é "recuar", não
   "destruir". Border no tom de identidade (contraste 4.7:1, chega para um
   contorno), texto no tom escuro (9.5:1). */
.btn--cancelar {
  background: transparent;
  border-color: var(--color-categoria-caminheiro);
  color: var(--color-categoria-caminheiro-dark);
}
.btn--cancelar:hover {
  background: color-mix(in oklch, var(--color-categoria-caminheiro) 8%, transparent);
  border-color: var(--color-categoria-caminheiro-dark);
}

/* Botão Apagar/destrutivo — laranja claro + texto escuro (-ink), não texto
   branco: ver nota de contraste acima. */
.btn--perigo {
  background: var(--color-danger);
  color: var(--color-danger-ink);
  border-color: var(--color-danger);
}
.btn--perigo:hover {
  background: var(--color-danger-dark);
  color: #fff;
  border-color: var(--color-danger-dark);
}

/* Botão Sucesso — o mesmo verde do primary, não um verde à parte.
   No Abrigo era um verde hardcoded diferente (#3d7a28, H≈139, sem token
   próprio) — a pedido, passa a ser literalmente a marca. Consequência a
   ter em conta: .btn--primario e .btn--sucesso ficam com o MESMO fundo —
   visualmente indistinguíveis. Se "ação principal" e "confirmar/aprovar"
   precisarem de se distinguir à vista (e não só pelo texto do botão), vale
   a pena reconsiderar isto ao portar o shell.css. */
.btn--sucesso {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.btn--sucesso:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

/* Badge-estado helper classes — reutilizar em vez de hexadecimais fixos */
.badge-estado--0  { background: var(--state-nao-iniciado-bg); color: var(--state-nao-iniciado-ink); }
.badge-estado--10 { background: var(--state-a-caminho-bg);    color: var(--state-a-caminho-ink); }
.badge-estado--20 { background: var(--state-a-validar-bg);    color: var(--state-a-validar-ink); }
.badge-estado--30 { background: var(--state-validado-bg);     color: var(--state-validado-ink); }
.badge-estado--40 { background: var(--state-aprovado-bg);     color: var(--state-aprovado-ink); }