/* Design tokens — sistema de gestao de igrejas. Visual de app nativo,
   mobile-first, cards com sombra suave, bottom nav fixa no mobile. */

:root {
  /* Cores — paleta neutra com acento roxo/indigo (identidade "app 2026") */
  --cor-primaria: #6d5bd0;
  --cor-primaria-hover: #5c4bc0;
  --cor-primaria-fraca: #ede9fe;
  --cor-acento: #22c55e;
  --cor-perigo: #ef4444;
  --cor-alerta: #f59e0b;
  --cor-sucesso: #16a34a;

  --cor-fundo: #f7f7fb;
  --cor-superficie: #ffffff;
  --cor-superficie-alt: #f1f0f8;
  --cor-borda: #e5e3f0;

  --cor-texto: #1f1b2e;
  --cor-texto-suave: #6b6780;
  --cor-texto-inverso: #ffffff;

  /* Espacamento */
  --espaco-xs: 4px;
  --espaco-sm: 8px;
  --espaco-md: 16px;
  --espaco-lg: 24px;
  --espaco-xl: 32px;

  /* Tipografia */
  --fonte-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --fonte-tamanho-sm: 0.8125rem;
  --fonte-tamanho-md: 0.9375rem;
  --fonte-tamanho-lg: 1.125rem;
  --fonte-tamanho-xl: 1.5rem;

  /* Bordas e sombras */
  --raio-sm: 8px;
  --raio-md: 14px;
  --raio-lg: 20px;
  --raio-pilula: 999px;

  --sombra-suave: 0 1px 2px rgba(31, 27, 46, 0.06), 0 2px 8px rgba(31, 27, 46, 0.06);
  --sombra-elevada: 0 8px 24px rgba(31, 27, 46, 0.12);

  --transicao-rapida: 140ms ease;
  --transicao-padrao: 220ms cubic-bezier(0.22, 1, 0.36, 1);

  --altura-bottom-nav: 64px;
  --altura-topbar: 56px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --cor-primaria: #8b7bf0;
    --cor-primaria-hover: #a094f5;
    --cor-primaria-fraca: #2a2447;
    --cor-acento: #4ade80;

    --cor-fundo: #131120;
    --cor-superficie: #1c1930;
    --cor-superficie-alt: #241f3d;
    --cor-borda: #322c4d;

    --cor-texto: #f2f0fa;
    --cor-texto-suave: #a9a4c4;
    --cor-texto-inverso: #131120;

    --sombra-suave: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.3);
    --sombra-elevada: 0 8px 24px rgba(0, 0, 0, 0.45);
  }
}

:root[data-theme='dark'] {
  --cor-primaria: #8b7bf0;
  --cor-primaria-hover: #a094f5;
  --cor-primaria-fraca: #2a2447;
  --cor-acento: #4ade80;
  --cor-fundo: #131120;
  --cor-superficie: #1c1930;
  --cor-superficie-alt: #241f3d;
  --cor-borda: #322c4d;
  --cor-texto: #f2f0fa;
  --cor-texto-suave: #a9a4c4;
  --cor-texto-inverso: #131120;
  --sombra-suave: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.3);
  --sombra-elevada: 0 8px 24px rgba(0, 0, 0, 0.45);
}

:root[data-theme='light'] {
  --cor-primaria: #6d5bd0;
  --cor-fundo: #f7f7fb;
  --cor-superficie: #ffffff;
  --cor-texto: #1f1b2e;
}