/* ==========================================================================
   tema-dxca.css — Fase 5
   Marca DxCA sobre o mesmo sistema: só reatribui as funções de cor.
   Escala, espaçamento, tipografia, forma e movimento continuam em
   design-tokens.css. Cores derivadas por ferramentas/paleta-dxca.js:
   mesma luminosidade (L*) de cada função do original, azuis do Logo-DX.png.
   Pedidos do cliente: fundo branco; seções escuras viram azul.
   ========================================================================== */

:root {
  --color-ink:   #031520;   /* texto escuro: grafite-azulado */
  --color-danger: #c81e1e;
  /* botão flutuante: verde do WhatsApp com texto branco, de propósito fora
     da paleta para chamar atenção (pedido do cliente) */
  --color-whatsapp:       #25d366;
  --color-whatsapp-hover: #1ebe5a;
  --color-whatsapp-text:  #ffffff;  /* erro de campo: 5,9:1 no branco (o vermelho puro dá 4:1) */
  --color-paper: #f5f8fc;   /* "fundo claro" do briefing */

  /* Marca: logo horizontal vetorizado (ferramentas/vetorizar-logo.js).
     Palavra e ícone em mono servem de máscara (herdam currentColor);
     o logo do header é SVG inline com as cores da marca. */
  --brand-word:       url("img/marca/dxca-palavra.svg");
  --brand-icon:       url("img/marca/dxca-icone.svg");
  --ratio-brand-word: 1128 / 260;
  --ratio-brand-icon: 459 / 481;
  --ratio-brand-logo: 1687 / 481;      /* ícone + linha + DxCA, sem tagline */
  --brand-logo-h:     var(--space-8);  /* 32 → 40 em ≥1024 */
  /* caixa da assinatura do rodapé: a mesma do original (svg 1727×314),
     para o rodapé manter a altura; a palavra DxCA fica contida nela */
  --ratio-watermark:  1727 / 314;

  /* Arte do hero no mobile: o título da DxCA é mais longo que o original,
     então a rede começa mais abaixo para não cobrir o link */
  --hero-visual-top: 50%;

  /* Foto de fundo do hero do Sobre: vira atmosfera (pedido do cliente: a
     foto detalhada atrapalhava o texto). Desfoque + leve ampliação para
     as bordas desfocadas não aparecerem. */
  --blur-photo:  14px;
  --blur-bleed:  1.08;

  /* Textura das seções azuis: grade fina de pontos (papel milimetrado / dados),
     que some em direção ao conteúdo. Sutil de propósito (pedido do cliente). */
  --textura-passo:   22px;
  --textura-ponto:   1px;
  --textura-forca:   9%;
  --textura-foco:    85% 15%;        /* onde a grade é mais visível */
  --textura-alcance: 70%;            /* até onde ela vai antes de sumir */

  /* Agente de IA (Dax): prévia do chat na Home e o modal */
  --agente-previa-h: 26rem;
  --dax-max-w:       60rem;
  --dax-max-h:       48rem;

  /* Processo pinado: 320vh para 4 etapas no original = 80vh por etapa */
  --pin-step: 80vh;

  /* Ícones das competências (Home 4.4) */
  --icon-card:      var(--space-16);   /* 64 → 96 em ≥1024 */
  --duration-orbit: 12s;               /* volta inteira da engrenagem */
  --icon-stroke:    1.75;              /* traço na grade 64 (≈ 2,6 px a 96 px) */
  --icon-signal:    0.45;              /* trecho do sinal: 45% do pino */
  --icon-glow:      0.8;               /* o brilho do chip "respira" até 80% */
  --icon-ripple:    3;
  --icon-feature:   var(--space-12);   /* ícone dos cards de desafio: 48 px */
  --icon-elo:       4px;               /* a ligação quebrada fecha 4 unidades de cada lado */
  --icon-lupa-x:    -14px;             /* a lupa sobe para as linhas do texto */
  --icon-lupa-y:    -12px;
  --icon-barras:    1.15;              /* as barras crescem 15% */                 /* a onda do alvo cresce até 3× */
  --turn-full:      360deg;

  /* Diagrama de integração (Home 4.6): linhas tracejadas que "fluem" */
  --integra-max:        36rem;
  --integra-dash:       4 6;
  --integra-dash-cycle: -10;   /* soma do traço + vão: um ciclo por pulso */
}

/* Tema claro: fundo branco */
:root,
[data-theme="light"] {
  --color-bg:            #ffffff;
  --color-bg-muted:      #f5f8fc;
  --color-surface:       #cdd6e0;
  --color-brand:         #058ef8;   /* azure do logo — L* 58, como o laranja (57) */
  --color-brand-muted:   #7bacfc;
  --color-brand-text:    #0153e6;   /* royal do logo: texto pequeno com contraste 6,2:1 */
  --color-text:          #031520;
  --color-text-muted:    #576b7b;
  --color-border:        #03152033;
  --color-border-muted:  #0315201a;
  --color-selection-bg:   #058ef8;
  --color-selection-text: #ffffff;
  --logo-ink:  #303b42;   /* grafite medido no logo ("CA") */
  --logo-line: #dadcdc;   /* linha vertical do logo */
}

/* Tema escuro → seções azuis (navy e cobalto do logo) */
[data-theme="dark"] {
  --color-bg:            #022464;
  --color-bg-muted:      #032b78;
  --color-surface:       #02369f;
  --color-brand:         #509cfb;
  --color-brand-muted:   #7bacfc;
  --color-brand-text:    #509cfb;
  --color-text:          #f5f8fc;
  --color-text-muted:    #839fb7;
  --color-border:        #f5f8fc1a;
  --color-border-muted:  #f5f8fc0d;
  --color-selection-bg:   #509cfb;
  --color-selection-text: #031520;
  --logo-ink:  var(--color-text);     /* logo em negativo sobre o azul */
  --logo-line: var(--color-border);
}

/* Tema da marca: quadrado da transição, loader */
[data-theme="brand"] {
  --color-bg:            #058ef8;
  --color-bg-muted:      #3aa2fa;
  --color-surface:       #7bacfc;
  --color-brand:         #0153e6;
  --color-brand-muted:   #7bacfc;
  --color-brand-text:    #031520;
  --color-text:          #031520;
  --color-text-muted:    #0b2f52;
  --color-border:        #0315204d;
  --color-border-muted:  #03152033;
  --color-selection-bg:   #f5f8fc;
  --color-selection-text: #031520;
}

@media (min-width: 1024px) {
  :root { --brand-logo-h: var(--space-10); --icon-card: var(--space-24); }
}

/* Véu sobre foto de fundo (hero do Sobre): o original usa 10% do fundo; na
   DxCA o véu é o azul da seção a 60%, para a foto ganhar o tom da marca e o
   texto manter a leitura sobre áreas claras e movimentadas da imagem */
:root,
[data-theme] {
  --color-bg-veil: color-mix(in oklab, var(--color-bg) 60%, transparent);
}