/* Decisão Digital - tokens. TONS MÉDIOS: ardósia luminosa + 2 secções claras (não brancas). Mobile first. Sem dependências. */
:root {
  /* Fundos escuros e médios (ardósia, nunca quase preto) */
  --dd-tinta: #1E2D3A;        /* topo e método (escuro) */
  --dd-fundo-azul: #26414A;   /* quem sou (médio, azul-ardósia) */
  --dd-fundo-verde: #1F3F3A;  /* método (médio-escuro, verde-ardósia) */
  --dd-fundo-fundo: #17222B;  /* rodapé (a mais funda: 1,5:1 abaixo do topo) */

  /* Fundos claros (NUNCA branco puro) */
  --dd-claro-menta: #EAF6F1;  /* posso */
  --dd-claro-quente: #EFEBE4; /* funil (cinza-quente) */

  /* Superfícies (sempre mais claras que o fundo onde assentam) */
  --dd-sup-funil: #FAF8F4;    /* cartão do funil, sobre --dd-claro-quente */
  --dd-sup-opcao: #F4F1EB;    /* opção em repouso e campos, dentro do cartão do funil */
  --dd-sup-posso: #F7FCFA;    /* cartões "posso", sobre --dd-claro-menta */
  --dd-sup-escolhida: #D5EEE5;/* opção escolhida: menta suave + borda pinho 2px + visto */
  --dd-sup-desactivada: #E2DED6;
  --dd-sup-metodo: #2B5249;   /* cartões do método, sobre --dd-fundo-verde */
  --dd-sup-ardosia: #2F5361;  /* cartões em quem sou e painel do aviso, sobre --dd-fundo-azul e --dd-fundo-fundo */

  /* Texto sobre escuro/médio (contraste WCAG AA) */
  --dd-texto: #EAF2F0;        /* ≥ 7,3:1 em todas as superfícies escuras/médias */
  --dd-texto-2: #C2D0D2;      /* ≥ 5,2:1 em todas */
  --dd-texto-3: #9AA9AC;      /* reserva (botão desactivado escuro, hoje sem uso) */
  --dd-branco: #FFFFFF;       /* só texto sobre pinho e vistos. Nunca fundo */

  /* Texto sobre claro */
  --dd-texto-claro: #1E2D3A;  /* 11,6 a 13,2:1 */
  --dd-texto-2-claro: #4A5A5E;/* 6,1:1 sobre cinza-quente, 6,5:1 sobre menta */
  --dd-texto-3-claro: #4F5B5E;/* só botão desactivado: 5,2:1 sobre --dd-sup-desactivada */

  /* Linhas */
  --dd-linha: rgba(159,227,207,.22);   /* sobre escuro/médio */
  --dd-linha-menta: #B5D6CA;           /* borda de cartões sobre menta */
  --dd-linha-quente: #CFC8BB;          /* borda do cartão do funil sobre cinza-quente */
  --dd-contorno: #9FE3CF;              /* contorno menta (escuro) */
  --dd-borda-campo: #7C8B8F;           /* escuro */
  --dd-borda-campo-claro: #6F7B7E;     /* 4,1:1 sobre cartão do funil */

  /* Acções: 2 destaques da mesma família */
  --dd-menta: #9FE3CF;        /* sobre escuro/médio: botão (texto tinta 11,5:1), ligações, foco, progresso */
  --dd-menta-h: #BDEFE2;
  --dd-menta-a: #86CDB8;
  --dd-pinho: #0B6E5F;        /* sobre claro: botão (texto branco 6,2:1), ligações, foco, progresso; 5,2:1 e mais sobre os claros */
  --dd-pinho-h: #095A4E;      /* hover sobre claro (branco 8,1:1) */
  --dd-pinho-a: #07463D;      /* activo sobre claro */
  --dd-texto-botao: #12181B;  /* texto do botão menta */

  /* Resolvidos por contentor (por defeito = escuro/médio; .fundo-claro troca, ver fim do ficheiro) */
  --dd-acento: var(--dd-menta);          /* ligações, preenchimento do progresso, setas */
  --dd-botao-fundo: var(--dd-menta);
  --dd-botao-fundo-h: var(--dd-menta-h);
  --dd-botao-fundo-a: var(--dd-menta-a);
  --dd-botao-texto: var(--dd-texto-botao);

  /* Estado */
  --dd-erro: #FFB4AB;         /* escuro/médio; 4,89:1 sobre --dd-sup-ardosia, mais sobre os fundos escuros */
  --dd-rascunho: #FFB4AB;     /* bloco RASCUNHO do aviso: painel é sempre ardósia, em qualquer secção. 4,89:1 */
  --dd-rascunho-claro: #8E1F19; /* se o bloco alguma vez cair em fundo claro: 7,5:1 sobre #EFEBE4 */
  --dd-erro-claro: #B3261E;   /* 6,1:1 sobre cartão do funil */
  --dd-ok: #9FE3CF;
  --dd-cod-laranja: #FFBE7A;  /* linhas de código decorativas do topo: laranja claro sobre ardósia escura */

  /* Efeitos de fundo (leves, só CSS) */
  --dd-ponto: rgba(159,227,207,.12);
  --dd-ponto-claro: rgba(11,110,95,.10);
  --dd-quadricula: radial-gradient(var(--dd-ponto) 1.5px, transparent 1.5px) 0 0 / 24px 24px;
  --dd-quadricula-claro: radial-gradient(var(--dd-ponto-claro) 1.5px, transparent 1.5px) 0 0 / 24px 24px;
  --dd-brilho: radial-gradient(ellipse 60% 55% at 78% 0%, rgba(159,227,207,.18), transparent 70%);
  --dd-brilho-funil: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255,255,255,.55), transparent 70%);
  --dd-marcador: linear-gradient(transparent calc(100% - .35em), rgba(159,227,207,.22) 0);
  --dd-cod-moldura-op: .5;    /* texto do código da janela de #metodo (a moldura fica a .14) */
  --dd-cod-rodape-op: .45;    /* código do rodapé */
  --dd-traco-esboco: 2px;

  /* Cor das peças SVG (currentColor): cada contentor dá a sua. Valores abaixo = escuro/médio */
  --dd-svg-robot: var(--dd-menta);
  --dd-svg-esboco: var(--dd-menta);
  --dd-svg-codigo: var(--dd-texto-2);
  --dd-svg-icone: var(--dd-menta);
  --dd-svg-icone-botao: var(--dd-texto-botao);
  --dd-svg-visto: var(--dd-menta);

  /* Tipografia: 2 famílias */
  --dd-fonte-titulo: "Fraunces", Georgia, "Times New Roman", serif;
  --dd-fonte-corpo: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --dd-t-corpo: 1.125rem;
  --dd-t-pequeno: 1rem;       /* mínimo absoluto */
  --dd-t-sub: 1.25rem;
  --dd-t-h3: 1.25rem;
  --dd-t-h2: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
  --dd-t-h1: clamp(1.875rem, 1.3rem + 2.8vw, 4rem);
  --dd-t-display: clamp(2.5rem, 1.9rem + 2.6vw, 3.5rem);
  --dd-ls-h1: -0.01em;
  --dd-lh-corpo: 1.6;         /* fundos mais claros: volta de 1,65 a 1,6 */
  --dd-lh-titulo: 1.15;

  /* Espaço (escala de 4) */
  --dd-e1: 4px;  --dd-e2: 8px;  --dd-e3: 12px; --dd-e4: 16px;
  --dd-e5: 24px; --dd-e6: 32px; --dd-e7: 48px; --dd-e8: 72px;
  --dd-secao-v: 56px;
  --dd-margem: 20px;
  --dd-largura: 1080px;       /* ≤ 80% */
  --dd-leitura: 62ch;

  /* Formas: rectangulares, nunca pill */
  --dd-r-botao: 10px;
  --dd-r-cartao: 16px;
  --dd-r-opcao: 12px;
  --dd-r-campo: 12px;
  --dd-r-barra: 2px;
  --dd-r-avatar: 50%;

  /* Alvos e sombras */
  --dd-alvo: 56px;
  --dd-alvo-cta: 64px;
  --dd-cta-largura: 240px;
  --dd-secao-v-quem: 56px;
  --dd-faixa-h: 160px;        /* altura das faixas decorativas */
  --dd-faixa-h-larga: 160px;  /* igual a >= 768: sem salto */
  --dd-sombra: 0 0 0 1px var(--dd-linha);
  --dd-sombra-cartao: 0 0 0 1px var(--dd-linha-menta), 0 8px 24px rgba(30,45,58,.10);  /* cartões "posso" (claro) */
  --dd-sombra-cartao-escuro: 0 0 0 1px var(--dd-linha), 0 12px 28px rgba(0,0,0,.22);   /* cartões do método e de quem sou */
  --dd-sombra-funil: 0 0 0 1px var(--dd-linha-quente), 0 16px 40px rgba(30,45,58,.14);
  --dd-foco: 0 0 0 3px var(--dd-tinta), 0 0 0 6px var(--dd-menta);
  --dd-foco-claro: 0 0 0 3px var(--dd-sup-funil), 0 0 0 6px var(--dd-pinho);
  --dd-foco-escuro: var(--dd-foco);

  /* Aviso de privacidade (painel sobre o rodapé #17222B) */
  --dd-aviso-t: 1rem;
  --dd-aviso-lh: 1.6;
  --dd-aviso-cor: #C2D0D2;    /* 5,2:1 sobre --dd-sup-ardosia */
  --dd-aviso-titulo: var(--dd-texto);
  --dd-aviso-fundo: var(--dd-sup-ardosia);
  --dd-aviso-largura: 60ch;
  --dd-aviso-pad: 20px;
  --dd-aviso-gap-p: 12px;
  --dd-aviso-gap-h3: 24px;
}

/* Contentor claro: pôr a classe na secção (posso, funil). Troca as variáveis resolvidas; o resto do CSS não muda. */
.fundo-claro {
  --dd-texto: var(--dd-texto-claro);
  --dd-texto-2: var(--dd-texto-2-claro);
  --dd-texto-3: var(--dd-texto-3-claro);
  --dd-borda-campo: var(--dd-borda-campo-claro);
  --dd-linha: var(--dd-linha-menta);
  --dd-contorno: var(--dd-pinho);
  --dd-erro: var(--dd-erro-claro);
  --dd-acento: var(--dd-pinho);
  --dd-botao-fundo: var(--dd-pinho);
  --dd-botao-fundo-h: var(--dd-pinho-h);
  --dd-botao-fundo-a: var(--dd-pinho-a);
  --dd-botao-texto: var(--dd-branco);
  --dd-foco: var(--dd-foco-claro);
  --dd-aviso-cor: var(--dd-texto-2-claro);
  --dd-svg-robot: var(--dd-pinho);
  --dd-svg-esboco: var(--dd-pinho);
  --dd-svg-codigo: var(--dd-texto-2-claro);
  --dd-svg-icone: var(--dd-pinho);
  --dd-svg-icone-botao: var(--dd-branco);
  --dd-svg-visto: var(--dd-pinho);
  color: var(--dd-texto-claro);
}

@media (min-width: 768px) {
  :root { --dd-secao-v: 80px; --dd-margem: 32px; --dd-aviso-pad: 24px; }
}
:focus:not(:focus-visible) { outline: none; box-shadow: none; }
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  * { transition: none !important; animation: none !important; }
}