/* =========================================================
   Igreja Nuvem — base
   Ordem das camadas, fontes, tokens, reset, tipografia
   e utilitários de acessibilidade.
   ========================================================= */
@layer tokens, reset, base, layout, components, sky, utilities;

/* Fontes próprias: subconjunto latino, que cobre o português.
   Nunito ecoa o "IGREJA" do logotipo; Alegreya, o traço caligráfico do "nuvem". */
@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Alegreya";
  src: url("../fonts/alegreya-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* Fontes reservas com métricas ajustadas: o texto não "pula" quando a fonte final chega.
   Valores gerados por tools/fonts/fallback_metrics.py --write. Não edite à mão. */
/* métricas-fallback: início */
@font-face {
  font-family: "Nunito Fallback";
  src: local("Arial"), local("ArialMT");
  size-adjust: 96.13%;
  ascent-override: 105.17%;
  descent-override: 36.72%;
  line-gap-override: 0.00%;
}
@font-face {
  font-family: "Alegreya Fallback";
  src: local("Georgia");
  size-adjust: 92.25%;
  ascent-override: 110.13%;
  descent-override: 37.40%;
  line-gap-override: 0.00%;
}
/* métricas-fallback: fim */

@layer tokens {
  :root {
    /* Cores (spec §8.1, identidade de 2026-09): todo o site no azul da marca, texto branco.
       Contrastes sobre #003a48: texto 12,4:1; texto secundário 8,1:1; rótulos 6,8:1. */
    --brand: #003a48;
    --brand-deep: #00252f;
    --brand-alt: #00313d; /* seções alternadas: separação clara sem sair do azul */
    --sky-top: #00252f;
    --sky-mid: #003a48;
    --sky-low: #1f5865;
    --page: #003a48;
    --text: #ffffff;
    --text-soft: rgb(255 255 255 / 0.78);
    --text-faint: rgb(255 255 255 / 0.7);
    --panel: rgb(255 255 255 / 0.05);
    --panel-strong: rgb(255 255 255 / 0.09);
    --line: rgb(255 255 255 / 0.16);
    --line-strong: rgb(255 255 255 / 0.7); /* contorno de botões: ≥ 3:1 (WCAG 1.4.11) */
    --ink: #003a48; /* texto sobre elementos brancos (botão principal, selo) */
    /* Dourado do cartaz de boas-vindas: só em detalhes (travessões, estrelas, anos, selo).
       5,8:1 sobre o azul (texto pequeno liberado); o azul sobre ele também dá 5,8:1. */
    --accent: #caaf63;

    /* Tipografia */
    --font-serif: "Alegreya", "Alegreya Fallback", Georgia, "Times New Roman", serif;
    --font-sans: "Nunito", "Nunito Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --step--1: clamp(0.875rem, 0.85rem + 0.12vw, 0.95rem);
    --step-0: clamp(1rem, 0.97rem + 0.18vw, 1.125rem);
    --step-1: clamp(1.15rem, 1.07rem + 0.4vw, 1.4rem);
    --step-2: clamp(1.45rem, 1.28rem + 0.85vw, 1.95rem);
    --step-3: clamp(1.9rem, 1.55rem + 1.75vw, 2.9rem);
    --step-4: clamp(2.5rem, 1.9rem + 3vw, 4.5rem);

    /* Espaços, formas e movimento */
    --space-xs: 0.5rem;
    --space-s: 0.75rem;
    --space-m: 1rem;
    --space-l: 1.5rem;
    --space-xl: 2.5rem;
    --space-2xl: clamp(3rem, 2.4rem + 3vw, 5rem);
    --space-section: clamp(4rem, 3rem + 5vw, 7.5rem);
    --radius-card: 14px;
    --radius-pill: 999px;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --header-h: 4.5rem;
    --container: 72rem;
    --container-narrow: 46rem;
  }
}

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    margin: 0;
  }

  h1, h2, h3, h4, p, figure, blockquote, dl, dd, address {
    margin: 0;
  }

  address {
    font-style: normal;
  }

  ul[role="list"],
  ol[role="list"] {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  img,
  svg {
    display: block;
    max-width: 100%;
  }

  img {
    height: auto;
  }

  button,
  input {
    font: inherit;
    color: inherit;
  }

  button {
    cursor: pointer;
  }

  /* O atributo hidden sempre vence regras de display dos componentes */
  [hidden] {
    display: none !important;
  }
}

@layer base {
  html {
    color-scheme: dark;
    background: var(--page);
    scroll-padding-top: calc(var(--header-h) + 1rem);
  }

  body {
    min-height: 100vh;
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: 1.6;
    color: var(--text);
    background: var(--page);
    overflow-wrap: break-word; /* com texto a 200%, uma palavra longa quebra em vez de ser cortada */
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3 {
    font-weight: 400;
    line-height: 1.1;
    text-wrap: balance;
  }

  p, li, dd {
    text-wrap: pretty;
  }

  a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }

  /* Anel de foco branco sobre o azul (12,4:1), afastado do elemento para aparecer também em botões brancos */
  :focus-visible {
    outline: 3px solid var(--text);
    outline-offset: 3px;
  }

  ::selection {
    background: var(--text);
    color: var(--ink);
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      transition-duration: 0.01ms !important;
    }
  }

  @media (forced-colors: active) {
    :focus-visible {
      outline-color: Highlight;
    }
  }
}

@layer utilities {
  .visually-hidden:not(:focus):not(:active) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .skip-link {
    position: fixed;
    z-index: 100;
    top: max(0.75rem, env(safe-area-inset-top));
    left: 1rem;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-pill);
    background: var(--text);
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
    transform: translateY(-160%);
  }

  .skip-link:focus {
    transform: none;
  }
}