/* ==========================================================================
   Variáveis — fonte única de verdade do design.

   Toda cor, espaçamento, fonte, raio, sombra e transição do site sai daqui.
   Nenhum outro arquivo deve declarar valor literal de cor: mudar o tema
   inteiro precisa ser uma edição neste arquivo.
   ========================================================================== */

:root {
  /* --- Azul Serenity: paleta da identidade --- */
  --serenity: #92A8D1;
  --serenity-light: #B8C9E8;
  --serenity-pale: #DCE7F7;
  /* Escurecido do #6F8FC4 original para alcançar 4.5:1 sobre os fundos
     claros do site. Matiz e saturação preservados. */
  --serenity-medium: #486FAF;
  --serenity-dark: #405A85;

  /* --- Superfícies --- */
  --background: #F5F8FC;
  --background-white: #FFFFFF;
  --background-soft: #EDF3FB;

  /* --- Texto --- */
  --text-primary: #26354D;
  /* Escurecido do #6F7D91 original pelo mesmo motivo. */
  --text-secondary: #637082;
  --text-on-accent: #FFFFFF;

  /* --- Peças sólidas ---
     O azul escuro fazia dois trabalhos: cor de texto e fundo de botão e
     rodapé. No tema claro dá na mesma; no escuro os dois papeis andam para
     lados opostos — o texto precisa clarear, o fundo do rodapé não. Daí
     cada papel ter o seu token. */
  --accent-surface: #405A85;
  --accent-surface-hover: #486FAF;
  --footer-surface: #405A85;
  /* Sobre rodapé e lightbox, escuros nos dois temas. */
  --text-on-dark: #FFFFFF;

  /* --- Traços e profundidade --- */
  --border: rgba(146, 168, 209, 0.35);
  --border-strong: rgba(146, 168, 209, 0.55);
  --shadow: rgba(64, 90, 133, 0.15);

  /* Superfícies translúcidas: navbar ao rolar e traços sobre o rodapé
     escuro. Ficam aqui para que nenhuma folha declare cor literal. */
  --surface-glass: rgba(255, 255, 255, 0.92);
  --border-on-dark: rgba(255, 255, 255, 0.35);
  --text-on-dark-muted: rgba(255, 255, 255, 0.75);

  /* Sobreposição do lightbox: derivada do azul escuro da paleta, para o
     véu puxar o tom Serenity em vez de um preto neutro. */
  --overlay-veil: rgba(26, 38, 56, 0.88);
  --surface-on-dark: rgba(255, 255, 255, 0.12);

  /* Véu do hero: mais denso no centro, onde fica o texto, e mais leve nas
     bordas, onde a foto pode aparecer. As opacidades foram escolhidas
     medindo o contraste WCAG sobre os pixels reais da fotografia. */
  --hero-veil-center: rgba(245, 248, 252, 0.93);
  --hero-veil-mid: rgba(245, 248, 252, 0.87);
  --hero-veil-edge: rgba(220, 231, 247, 0.74);

  /* Dissolvência do pé do hero: a foto desaparece dentro do branco da
     seção seguinte, em vez de terminar num corte reto. Vários passos em
     vez de dois evitam a faixa dura que um gradiente linear simples
     deixa à vista. */
  --hero-fade-soft: rgba(255, 255, 255, 0.16);
  --hero-fade-mid: rgba(255, 255, 255, 0.55);
  --hero-fade-strong: rgba(255, 255, 255, 0.88);

  /* --- Ambientação do fundo ---
     Luz e papel. As manchas são o azul da identidade em opacidade de um
     dígito: se der para apontar onde começa o círculo, está forte demais. O
     teto não é estético, é contraste: sobre o fundo claro, 7% de azul derruba
     o texto secundário para 4.49:1, e 5% o mantém em 4.56:1.
     O véu é o branco das seções claras, agora translucido, para a luz de
     baixo atravessar e a troca entre seções virar dissolvência. */
  --ambient-glow: rgba(146, 168, 209, 0.055);
  --ambient-glow-soft: rgba(146, 168, 209, 0.04);
  /* Sobre as seções claras há o véu branco atenuando, então a luz de lá
     pode ser mais densa sem custo de leitura. */
  --ambient-glow-strong: rgba(146, 168, 209, 0.1);
  /* Luz que clareia em vez de tingir. É ela que dobra a variação percebida
     ao longo da página sem custar contraste: entre o pico claro e o pico
     azul o fundo anda uns 11 níveis, quando só tingir daria 5. */
  --ambient-lift: rgba(255, 255, 255, 0.55);
  --ambient-fade: rgba(255, 255, 255, 0.45);
  --ambient-trace: rgba(72, 111, 175, 0.12);
  --surface-veil: rgba(255, 255, 255, 0.82);
  --ambient-grain: 0.09;
  /* Força do monograma ao fundo da carta. Sobre o escuro o mesmo alfa
     salta mais, porque ali o traço clareia em vez de tingir. */
  --watermark: 0.055;

  --shadow-sm: 0 2px 8px var(--shadow);
  --shadow-md: 0 8px 24px var(--shadow);
  --shadow-lg: 0 18px 48px var(--shadow);

  /* --- Tipografia ---
     Duas famílias, carregadas em base.html: a serifa carrega o romance e
     a personalidade; a sem-serifa carrega a leitura e a interface.
     Trocar de fonte no futuro é editar só estas duas linhas. */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Escala fluida: acompanha a largura da tela sem media query.
     Do --fs-xl para cima a escala é usada quase só pela serifa, e por isso
     recebeu um acréscimo: medida, a altura-x da Cormorant é 80% da altura-x
     da fonte de reserva, então no mesmo corpo ela pareceria encolhida. */
  --fs-xs: 0.78rem;
  --fs-sm: 0.875rem;
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --fs-xl: clamp(1.58rem, 1.4rem + 0.82vw, 2.05rem);
  --fs-2xl: clamp(2.05rem, 1.7rem + 1.64vw, 2.95rem);
  --fs-3xl: clamp(2.65rem, 2rem + 3.05vw, 4.4rem);
  --fs-hero: clamp(3rem, 2.1rem + 4.9vw, 6.75rem);

  /* Mesma faixa do --fs-lg, compensada para a serifa. Existe porque o
     --fs-lg é compartilhado pelas duas famílias e não pode ser escalado. */
  --fs-display-sm: clamp(1.35rem, 1.26rem + 0.42vw, 1.5rem);

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-base: 1.7;

  --tracking-wide: 0.08em;
  --tracking-wider: 0.18em;

  /* --- Espaçamento: escala de 4px --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Respiro vertical das seções, fluido entre mobile e desktop. */
  --section-padding: clamp(3.5rem, 2rem + 7vw, 7.5rem);

  /* --- Larguras --- */
  --container-max: 1180px;
  --container-narrow: 760px;
  --container-padding: clamp(1.25rem, 4vw, 2.5rem);

  /* --- Formas --- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* --- Movimento --- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --transition-fast: 160ms var(--ease-out);
  --transition-base: 280ms var(--ease-out);
  --transition-slow: 620ms var(--ease-out);

  /* --- Camadas --- */
  --z-navbar: 100;
  --z-overlay: 200;
}

/* ==========================================================================
   Tema escuro — o mesmo convite à noite.

   Não é um segundo design: é esta mesma lista de tokens com outros valores.
   Nenhuma folha precisa saber que existe um tema escuro, porque nenhuma
   folha declara cor — todas leem daqui.

   O azul-noite sai do próprio #26354D dos textos, escurecido. Os papeis se
   invertem: o que era fundo claro vira superfície escura, e o que era texto
   escuro vira texto claro. Rodapé e lightbox seguem escuros nos dois temas,
   e por isso têm tokens só deles.

   `prefers-color-scheme` decide a primeira visita; o botão carimba
   `data-tema` no <html> e passa a mandar. Os dois blocos abaixo dizem
   exatamente isso, nessa ordem — e um teste garante que continuem idênticos.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --serenity: #6E88B5;
    --serenity-light: #8FA6CE;
    --serenity-pale: #DCE7F7;
    /* Sobre o fundo escuro são os tons claros que carregam o contraste:
       7.9:1 e 10.5:1, contra os 4.5:1 no limite do tema claro. */
    --serenity-medium: #98B2DB;
    --serenity-dark: #BACCE9;

    --background: #131C29;
    --background-white: #1B2637;
    --background-soft: #222E42;

    --text-primary: #E8EEF8;
    --text-secondary: #A6B6CB;
    --text-on-accent: #101A27;

    --accent-surface: #7FA0D6;
    --accent-surface-hover: #9DB8E4;
    --footer-surface: #0E151F;
    --text-on-dark: #FFFFFF;

    --border: rgba(146, 168, 209, 0.22);
    --border-strong: rgba(146, 168, 209, 0.38);
    --shadow: rgba(0, 0, 0, 0.45);

    --surface-glass: rgba(19, 28, 41, 0.92);

    /* O véu do hero inverte: era clarear a foto para o texto escuro, agora
       é escurecê-la para o texto claro. As opacidades são as mesmas. */
    --hero-veil-center: rgba(19, 28, 41, 0.93);
    --hero-veil-mid: rgba(19, 28, 41, 0.87);
    --hero-veil-edge: rgba(14, 21, 31, 0.74);
    --hero-fade-soft: rgba(19, 28, 41, 0.16);
    --hero-fade-mid: rgba(19, 28, 41, 0.55);
    --hero-fade-strong: rgba(19, 28, 41, 0.88);

    /* A luz muda de sinal: no claro o azul tinge o fundo, aqui ele clareia.
       O grão afina, porque sobre fundo escuro o mesmo ruído salta mais. */
    --ambient-glow: rgba(146, 168, 209, 0.07);
    --ambient-glow-soft: rgba(146, 168, 209, 0.05);
    --ambient-glow-strong: rgba(146, 168, 209, 0.1);
    --ambient-lift: rgba(200, 220, 255, 0.05);
    --ambient-fade: rgba(200, 220, 255, 0.04);
    --ambient-trace: rgba(146, 168, 209, 0.16);
    --surface-veil: rgba(255, 255, 255, 0.062);
    --ambient-grain: 0.05;
    --watermark: 0.032;
  }
}

/* A escolha do visitante vence o sistema, nos dois sentidos. */
:root[data-tema="escuro"] {
  --serenity: #6E88B5;
  --serenity-light: #8FA6CE;
  --serenity-pale: #DCE7F7;
  /* Sobre o fundo escuro são os tons claros que carregam o contraste:
     7.9:1 e 10.5:1, contra os 4.5:1 no limite do tema claro. */
  --serenity-medium: #98B2DB;
  --serenity-dark: #BACCE9;

  --background: #131C29;
  --background-white: #1B2637;
  --background-soft: #222E42;

  --text-primary: #E8EEF8;
  --text-secondary: #A6B6CB;
  --text-on-accent: #101A27;

  --accent-surface: #7FA0D6;
  --accent-surface-hover: #9DB8E4;
  --footer-surface: #0E151F;
  --text-on-dark: #FFFFFF;

  --border: rgba(146, 168, 209, 0.22);
  --border-strong: rgba(146, 168, 209, 0.38);
  --shadow: rgba(0, 0, 0, 0.45);

  --surface-glass: rgba(19, 28, 41, 0.92);

  /* O véu do hero inverte: era clarear a foto para o texto escuro, agora
     é escurecê-la para o texto claro. As opacidades são as mesmas. */
  --hero-veil-center: rgba(19, 28, 41, 0.93);
  --hero-veil-mid: rgba(19, 28, 41, 0.87);
  --hero-veil-edge: rgba(14, 21, 31, 0.74);
  --hero-fade-soft: rgba(19, 28, 41, 0.16);
  --hero-fade-mid: rgba(19, 28, 41, 0.55);
  --hero-fade-strong: rgba(19, 28, 41, 0.88);

  /* A luz muda de sinal: no claro o azul tinge o fundo, aqui ele clareia.
     O grão afina, porque sobre fundo escuro o mesmo ruído salta mais. */
  --ambient-glow: rgba(146, 168, 209, 0.07);
  --ambient-glow-soft: rgba(146, 168, 209, 0.05);
  --ambient-glow-strong: rgba(146, 168, 209, 0.1);
  --ambient-lift: rgba(200, 220, 255, 0.05);
  --ambient-fade: rgba(200, 220, 255, 0.04);
  --ambient-trace: rgba(146, 168, 209, 0.16);
  --surface-veil: rgba(255, 255, 255, 0.062);
  --ambient-grain: 0.05;
  --watermark: 0.032;
}