/* ==========================================================================
   Design tokens — Dinamize
   ---------------------------------------------------------------------------
   ESTE É O ÚNICO ARQUIVO QUE DEFINE A IDENTIDADE VISUAL DO PAINEL.
   O atendo-faq.css não contém nenhuma cor, fonte, raio ou sombra literal:
   ele só consome os tokens declarados aqui.

   Para alinhar ao Design System da Dinamize
   (https://dev.indexvirtual.com/dinamize/design-system/), substitua os valores
   abaixo pelos oficiais. Nada mais no projeto precisa ser tocado.

   ⚠️  Os valores atuais são PROVISÓRIOS. O ambiente onde este painel foi
       desenvolvido não tem acesso externo à web (o gateway bloqueia qualquer
       host), então o Design System não pôde ser lido para extrair os tokens
       reais. Cada linha marcada com «TODO» aguarda o valor oficial.
   ========================================================================== */

.dzfaq {

  /* ------------------------------------------------------------------ *
   * 1. Cores primitivas — a escala da marca                            *
   *    TODO: substituir pela rampa de azul do Design System.           *
   * ------------------------------------------------------------------ */
  --dz-blue-50:  #e8f1ff;
  --dz-blue-100: #d3e3ff;
  --dz-blue-200: #a8c6f7;
  --dz-blue-300: #6b9beb;
  --dz-blue-400: #2f74dd;
  --dz-blue-500: #0a58ca;   /* cor principal da marca */
  --dz-blue-600: #0a4fb4;
  --dz-blue-700: #06398a;
  --dz-blue-800: #0a2c63;
  --dz-blue-900: #10233f;

  /* Cor de apoio (gradientes, detalhes, ícone da IA) — TODO */
  --dz-accent-300: #7fe0f0;
  --dz-accent-500: #00b8d9;
  --dz-accent-700: #007e96;

  /* Neutros — TODO: substituir pela escala de cinzas do Design System. */
  --dz-neutral-0:   #ffffff;
  --dz-neutral-50:  #f5f8fc;
  --dz-neutral-100: #eef2f8;
  --dz-neutral-200: #e3e9f2;
  --dz-neutral-300: #c9d7ea;
  --dz-neutral-400: #93a2b8;
  --dz-neutral-600: #5a6b83;
  --dz-neutral-700: #33445e;
  --dz-neutral-900: #10233f;

  /* Cores de estado — TODO */
  --dz-green-500:  #1f9d68;
  --dz-amber-100:  #fff8e6;
  --dz-amber-500:  #b7791f;
  --dz-amber-800:  #6b5518;
  --dz-amber-900:  #4d3c0d;

  /* ------------------------------------------------------------------ *
   * 2. Tokens semânticos — o que o componente realmente usa            *
   *    Normalmente basta reapontar estes para a escala acima.          *
   * ------------------------------------------------------------------ */
  --dz-primary:      var(--dz-blue-500);
  --dz-primary-dark: var(--dz-blue-700);
  --dz-primary-soft: var(--dz-blue-50);
  --dz-accent:       var(--dz-accent-500);

  --dz-ink:          var(--dz-neutral-900);   /* títulos e texto principal   */
  --dz-ink-body:     var(--dz-neutral-700);   /* corpo das respostas         */
  --dz-ink-soft:     var(--dz-neutral-600);   /* texto secundário            */
  --dz-ink-muted:    var(--dz-neutral-400);   /* placeholders e ícones       */

  --dz-surface:      var(--dz-neutral-0);     /* fundo dos cards             */
  --dz-canvas:       var(--dz-neutral-50);    /* fundo do painel             */
  --dz-line:         var(--dz-neutral-200);   /* bordas e divisores          */
  --dz-line-strong:  var(--dz-neutral-300);   /* bordas em hover             */

  --dz-success:      var(--dz-green-500);
  --dz-warning:      var(--dz-amber-500);
  --dz-warning-soft: var(--dz-amber-100);
  --dz-warning-ink:  var(--dz-amber-800);
  --dz-warning-ink-strong: var(--dz-amber-900);

  --dz-on-primary:   var(--dz-neutral-0);     /* texto sobre a cor primária  */

  /* Anel de foco (acessibilidade) — TODO */
  --dz-focus-ring: 0 0 0 3px rgba(10, 88, 202, .16);
  --dz-ring-flash: rgba(10, 88, 202, .35);    /* destaque ao abrir um item   */

  /* Carregamento (skeleton) */
  --dz-skeleton-from: var(--dz-neutral-100);
  --dz-skeleton-to:   var(--dz-neutral-50);

  /* ------------------------------------------------------------------ *
   * 3. Tipografia — TODO: confirmar famílias e pesos do Design System  *
   * ------------------------------------------------------------------ */
  --dz-font:         "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --dz-font-heading: var(--dz-font);

  --dz-text-xs:   12px;
  --dz-text-sm:   13px;
  --dz-text-md:   15px;
  --dz-text-lg:   18px;
  --dz-text-xl:   20px;
  --dz-text-2xl:  clamp(24px, 3.2vw, 34px);

  --dz-weight-regular:  400;
  --dz-weight-medium:   500;
  --dz-weight-semibold: 600;
  --dz-weight-bold:     700;
  --dz-weight-black:    800;

  --dz-leading: 1.6;
  --dz-tracking-tight: -.02em;
  --dz-tracking-wide:  .09em;

  /* ------------------------------------------------------------------ *
   * 4. Formas e elevação — TODO                                        *
   * ------------------------------------------------------------------ */
  --dz-radius:      14px;
  --dz-radius-sm:   10px;
  --dz-radius-pill: 999px;

  --dz-shadow:    0 1px 2px rgba(16, 35, 63, .06), 0 8px 24px rgba(16, 35, 63, .07);
  --dz-shadow-sm: 0 1px 3px rgba(16, 35, 63, .08);
  --dz-shadow-focus: 0 4px 18px rgba(10, 88, 202, .1);

  /* ------------------------------------------------------------------ *
   * 5. Espaçamento                                                     *
   * ------------------------------------------------------------------ */
  --dz-space-1: 6px;
  --dz-space-2: 10px;
  --dz-space-3: 14px;
  --dz-space-4: 18px;
  --dz-space-5: 22px;
  --dz-space-6: clamp(16px, 2.4vw, 26px);
  --dz-space-7: clamp(18px, 3vw, 34px);
}