/*
  Tokens oficiais — fonte única de verdade em DOC/LOGO/JOAO-identidade-visual/tokens.css
  (este arquivo é cópia exata; qualquer alteração de paleta clara precisa ser
  aprovada lá primeiro). Bloco de tema escuro abaixo é extensão documentada em
  DOC/PADRAO_VISUAL.md §6 — mesmos nomes de token, mesmos papéis semânticos,
  só os valores mudam. --joao-primary-900/700 funcionam como "tinta forte"
  (texto/borda), nunca como fundo de área grande — por isso podem virar claros
  no escuro sem quebrar nenhum uso existente.
*/
:root {
  --joao-primary-900: #102A43;
  --joao-primary-700: #243B53;
  --joao-secondary-600: #148F83;
  --joao-secondary-500: #18A999;
  --joao-accent-500: #E6A23C;
  --joao-bg: #F7FAFC;
  --joao-surface: #FFFFFF;
  --joao-text: #243B53;
  --joao-text-muted: #627D98;
  --joao-border: #D9E2EC;
  --joao-success: #2F855A;
  --joao-warning: #D97706;
  --joao-danger: #C53030;
  --joao-info: #2B6CB0;
  --joao-gray-100: #EDF2F7;
  --joao-gray-200: #E2E8F0;
  --joao-radius-sm: 8px;
  --joao-radius-md: 12px;
  --joao-radius-lg: 16px;
  --joao-shadow-card: 0 8px 24px rgba(16, 42, 67, .08);
  --joao-font-display: "Sora", "Segoe UI", Arial, sans-serif;
  --joao-font-body: "Inter", "Segoe UI", Arial, sans-serif;
}

/* Tema escuro: aplicado via [data-theme="dark"] (escolha manual, persistida em
   localStorage) ou automaticamente quando o SO pede prefers-color-scheme:dark
   e não há escolha manual salva (ver joaoAplicarTema em site.js). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --joao-primary-900: #EAF1F7;
    --joao-primary-700: #C7D8E6;
    --joao-secondary-600: #1AA898;
    --joao-secondary-500: #22C7B8;
    --joao-accent-500: #F2B255;
    --joao-bg: #0A1E33;
    --joao-surface: #122C45;
    --joao-text: #DCE6EE;
    --joao-text-muted: #92A9BF;
    --joao-border: #24425C;
    --joao-success: #48BB86;
    --joao-warning: #F0A93E;
    --joao-danger: #F0645F;
    --joao-info: #5B9BD9;
    --joao-gray-100: #16324A;
    --joao-gray-200: #1C3A54;
    --joao-shadow-card: 0 8px 24px rgba(0, 0, 0, .35);
  }
}
:root[data-theme="dark"] {
  --joao-primary-900: #EAF1F7;
  --joao-primary-700: #C7D8E6;
  --joao-secondary-600: #1AA898;
  --joao-secondary-500: #22C7B8;
  --joao-accent-500: #F2B255;
  --joao-bg: #0A1E33;
  --joao-surface: #122C45;
  --joao-text: #DCE6EE;
  --joao-text-muted: #92A9BF;
  --joao-border: #24425C;
  --joao-success: #48BB86;
  --joao-warning: #F0A93E;
  --joao-danger: #F0645F;
  --joao-info: #5B9BD9;
  --joao-gray-100: #16324A;
  --joao-gray-200: #1C3A54;
  --joao-shadow-card: 0 8px 24px rgba(0, 0, 0, .35);
}


/* ════════════════════════════════════════════════════════════════════════
   CAMADA DERIVADA — acessibilidade, forma e ritmo
   ════════════════════════════════════════════════════════════════════════
   O bloco acima é a paleta de marca (cópia controlada de
   DOC/LOGO/JOAO-identidade-visual/tokens.css) e NÃO é alterado aqui.

   Esta camada existe porque vários pares da marca reprovam em WCAG 2.2 AA
   quando usados como TEXTO ou como fundo de botão (medido, não estimado):

     branco sobre --joao-secondary-500 ......... 2.93:1  reprova
     branco sobre --joao-secondary-600 ......... 3.97:1  reprova
     --joao-secondary-600 como link em branco .. 3.97:1  reprova
     --joao-text-muted sobre --joao-surface .... 4.28:1  reprova
     --joao-warning sobre --joao-surface ....... 3.19:1  reprova
     --joao-accent-500 sobre --joao-surface .... 2.19:1  reprova

   Regra de uso: os tokens de marca continuam válidos para PREENCHIMENTO,
   filete, marcador e gráfico (contraste não-textual, mínimo 3:1). Onde há
   texto — rótulo de botão, link, mensagem, badge — usa-se o token "-ink"
   ou "action" correspondente, que passa em 4.5:1. Nenhum componente deve
   escrever cor literal: sempre um destes nomes.
   ──────────────────────────────────────────────────────────────────────── */
:root {
  /* Ação principal (preenchimento de botão + texto por cima) */
  --joao-action: #0E7268;          /* branco por cima: 5.79:1 */
  --joao-action-hover: #0B6B62;    /* branco por cima: 6.38:1 */
  --joao-action-active: #09564F;
  --joao-on-action: #FFFFFF;

  /* Tinta de ação: links, ações em tabela, sobretítulos */
  --joao-ink-action: #0E7268;      /* 5.79:1 em surface, 5.53:1 em bg */

  /* Tintas semânticas para TEXTO (o token de marca fica para preenchimento) */
  --joao-success-ink: #276749;
  --joao-warning-ink: #9A4C07;
  --joao-danger-ink: #B02525;
  --joao-info-ink: #2B6CB0;
  --joao-accent-ink: #8A5A00;

  /* Texto secundário legível (substitui 4.28:1 por 5.83:1) */
  --joao-text-muted: #52677E;

  /* Fundos tênues — só fundo, o texto por cima usa a tinta correspondente */
  --joao-tint-action: rgba(14, 114, 104, .10);
  --joao-tint-success: rgba(39, 103, 73, .10);
  --joao-tint-warning: rgba(180, 83, 9, .10);
  --joao-tint-danger: rgba(176, 37, 37, .10);
  --joao-tint-info: rgba(43, 108, 176, .10);
  --joao-tint-neutro: rgba(82, 103, 126, .12);

  --joao-on-danger: #FFFFFF;

  /*
     Série de dados — a única paleta categórica do sistema.
     Seis matizes distinguíveis, todas acima de 3:1 contra a superfície
     (WCAG 1.4.11, objeto gráfico não-textual) e legíveis também como rótulo.
     A ordem é fixa: quem for a série 1 numa tela é a série 1 em todas.
     Gráfico nenhum escolhe cor por conta própria.
  */
  --joao-serie-1: #0E7268;   /* teal   — 5,79:1 */
  --joao-serie-2: #2B6CB0;   /* indigo — 5,42:1 */
  --joao-serie-3: #B4670A;   /* âmbar  — 4,30:1 */
  --joao-serie-4: #7A4B9C;   /* ameixa — 6,34:1 */
  --joao-serie-5: #C2185B;   /* carmim — 5,87:1 */
  --joao-serie-6: #2F7D4F;   /* verde  — 5,04:1 */

  /* Fluxo de caixa: verde entra, carmim sai. Semântica fixa, nunca invertida.
     Acompanhadas sempre de rótulo e valor — a cor não carrega o sentido. */
  --joao-fluxo-entrada: #2F7D4F;
  --joao-fluxo-saida: #C2185B;
  --joao-grade-grafico: rgba(16, 42, 67, .10);
  /* Opacidade da area sob a linha. Sobe no escuro: o mesmo valor que
     funciona sobre superficie clara vira cinza chapado sobre a escura. */
  --joao-area-opacidade: 13%;
  --joao-area-opacidade-fraca: 11%;

  /* Palco: superfície escura fixa (cronômetro do púlpito). Não inverte com
     o tema — é lida de longe, em ambiente de culto, nos dois modos. */
  --joao-palco: #102A43;
  --joao-on-palco: #F7FAFC;          /* 13.97:1 */
  --joao-on-palco-suave: #C3CFDA;    /*  9.24:1 */
  --joao-on-palco-atencao: #F2B255;  /*  7.86:1 */
  --joao-on-palco-alerta: #FF9A96;   /*  7.19:1 */
  --joao-palco-trilho: rgba(247, 250, 252, .2);

  /* Foco: um anel só, igual em todo o sistema */
  --joao-focus-ring: 0 0 0 3px rgba(14, 114, 104, .35);
  --joao-focus-cor: var(--joao-action);

  /* Ritmo de espaçamento (base 4px) */
  --joao-space-1: .25rem;
  --joao-space-2: .5rem;
  --joao-space-3: .75rem;
  --joao-space-4: 1rem;
  --joao-space-5: 1.5rem;
  --joao-space-6: 2rem;
  --joao-space-7: 3rem;

  /* Escala tipográfica */
  --joao-fs-micro: .72rem;
  --joao-fs-sm: .82rem;
  --joao-fs-base: .94rem;
  --joao-fs-lg: 1.05rem;
  --joao-fs-h2: 1.15rem;
  --joao-fs-h1: 1.4rem;

  /* Controles: alvo de toque WCAG 2.2 (2.5.8 Target Size mínimo 24px;
     adotamos 44px, recomendação AAA, porque o uso real é em celular) */
  --joao-touch-min: 44px;
  --joao-field-altura: 42px;
  --joao-radius-pill: 999px;
  --joao-shadow-sm: 0 1px 2px rgba(16, 42, 67, .06);
  --joao-shadow-pop: 0 12px 32px rgba(16, 42, 67, .16);

  /* Largura de leitura confortável (Bíblia, resumo de sermão, avisos) */
  --joao-medida-leitura: 68ch;
}

/* Escuro: a mesma camada, remapeada. No escuro o preenchimento teal é claro,
   então o texto por cima passa a ser a tinta institucional escura (7.97:1) —
   branco sobre teal claro dá 2.11:1 e reprovaria. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --joao-action: #22C7B8;
    --joao-action-hover: #40DAC9;
    --joao-action-active: #17A99C;
    --joao-on-action: #062033;
    --joao-ink-action: #3FD9C8;
    --joao-success-ink: #6BD6A3;
    --joao-warning-ink: #F5BC63;
    --joao-danger-ink: #FF8A85;
    --joao-info-ink: #7FB6E8;
    --joao-accent-ink: #F5BC63;
    --joao-on-danger: #062033;
    --joao-text-muted: #9FB6CC;
    --joao-serie-1: #3FD9C8;
    --joao-serie-2: #7FB6E8;
    --joao-serie-3: #F0A93E;
    --joao-serie-4: #C89BE8;
    --joao-serie-5: #FF8FB1;
    --joao-serie-6: #6BD6A3;
    --joao-fluxo-entrada: #6BD6A3;
    --joao-fluxo-saida: #FF8FB1;
    --joao-grade-grafico: rgba(220, 230, 238, .14);
  --joao-area-opacidade: 26%;
  --joao-area-opacidade-fraca: 22%;
    --joao-area-opacidade: 26%;
    --joao-area-opacidade-fraca: 22%;
    
    --joao-tint-action: rgba(34, 199, 184, .14);
    --joao-tint-success: rgba(72, 187, 134, .16);
    --joao-tint-warning: rgba(240, 169, 62, .16);
    --joao-tint-danger: rgba(240, 100, 95, .16);
    --joao-tint-info: rgba(91, 155, 217, .16);
    --joao-tint-neutro: rgba(159, 182, 204, .14);
    --joao-focus-ring: 0 0 0 3px rgba(34, 199, 184, .45);
    --joao-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --joao-shadow-pop: 0 12px 32px rgba(0, 0, 0, .5);
  }
}
:root[data-theme="dark"] {
  --joao-action: #22C7B8;
  --joao-action-hover: #40DAC9;
  --joao-action-active: #17A99C;
  --joao-on-action: #062033;
  --joao-ink-action: #3FD9C8;
  --joao-success-ink: #6BD6A3;
  --joao-warning-ink: #F5BC63;
  --joao-danger-ink: #FF8A85;
  --joao-info-ink: #7FB6E8;
  --joao-accent-ink: #F5BC63;
  --joao-on-danger: #062033;
  --joao-text-muted: #9FB6CC;
  --joao-serie-1: #3FD9C8;
  --joao-serie-2: #7FB6E8;
  --joao-serie-3: #F0A93E;
  --joao-serie-4: #C89BE8;
  --joao-serie-5: #FF8FB1;
  --joao-serie-6: #6BD6A3;
  --joao-fluxo-entrada: #6BD6A3;
  --joao-fluxo-saida: #FF8FB1;
  --joao-grade-grafico: rgba(220, 230, 238, .14);
  
  --joao-tint-action: rgba(34, 199, 184, .14);
  --joao-tint-success: rgba(72, 187, 134, .16);
  --joao-tint-warning: rgba(240, 169, 62, .16);
  --joao-tint-danger: rgba(240, 100, 95, .16);
  --joao-tint-info: rgba(91, 155, 217, .16);
  --joao-tint-neutro: rgba(159, 182, 204, .14);
  --joao-focus-ring: 0 0 0 3px rgba(34, 199, 184, .45);
  --joao-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --joao-shadow-pop: 0 12px 32px rgba(0, 0, 0, .5);
}