/* =============================================================================
   MotiCards — tema Spring Rain
   Camada única de tema, carregada DEPOIS de styles.css. Troca a paleta e a
   fonte DOS TÍTULOS, sem tocar no design system: os nomes semânticos continuam
   sendo o contrato, só os valores mudam. Para voltar ao original, remova o
   <link> deste arquivo das páginas.

   Escopo da fonte: Spring Rain vive em --fonte-display, ou seja h1, h2, h3,
   frases de card, números, preços e marca. Todo o texto corrido, botões,
   links, FAQ, tabelas e rótulos seguem em Plus Jakarta Sans, como no original.
   ============================================================================= */

/* ------------------------------------------------------------ tipografia ---
   Um único arquivo cobre 100–900: assim nenhum pedido de peso 600/700/900 das
   páginas gera negrito sintético (que borra uma manuscrita fina).

   A versão SVG da fonte não entra aqui — o teste está descrito no fim do
   arquivo. */
@font-face {
  font-family: 'Spring Rain';
  src: url('assets/fonts/spring-rain.ttf') format('truetype'),
       url('assets/fonts/spring-rain.otf') format('opentype');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* --- rain: nova marca (claro). Substitui a rampa ember, então tudo que já
     apontava para ela — wash, pincelada, botão aquarela, traços — vem junto. */
  --ember-50: #EEF6F2;
  --ember-100: #D8ECE3;
  --ember-200: #B4D9C9;
  --ember-300: #86C0A9;
  --ember-400: #55A385;
  --ember-500: #2F8767;
  --ember-600: #1F6F54;
  --ember-700: #175943;
  --ember-800: #114536;
  --ember-900: #0C3328;

  /* --- mint: marca no escuro (substitui apricot) --- */
  --apricot-200: #BFE6D5;
  --apricot-300: #9BD9C0;
  --apricot-400: #74CBA8;

  /* --- papel esfriado: o bege vira cal úmida --- */
  --cream-50: #FFFFFF;
  --cream-100: #FBFAF4;
  --cream-200: #F4F3EA;
  --cream-300: #EBEADD;
  --cream-400: #DCDCCB;
  --cream-500: #C4C6B0;

  /* --- neutros escuros com fundo verde --- */
  --coal-600: #3E4A44;
  --coal-700: #333D38;
  --coal-800: #28312D;
  --coal-900: #1E2622;

  --ink-100: #F2F5EF;
  --ink-300: #A9B4AC;
  --ink-500: #5D6A62;
  --ink-900: #16211C;

  /* gold segue intocado: é exclusivo de premium e lendário. */

  /* Spring Rain não tem travessão (—), ponto médio (·) nem seta (→): a cadeia
     de reserva existe para esses três caracteres, que caem em Sentient. */
  --fonte-display: 'Spring Rain', 'Sentient', Georgia, serif;
  /* Texto corrido volta ao original — nenhuma alteração aqui. */
  --fonte-corpo: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif;
}

/* ------------------------------------------------- escala compensada ------
   Spring Rain tem altura de x bem menor que Sentient: nos mesmos tamanhos o
   título encolhe. Só as classes de display mudam. */
.t-display { font: 400 clamp(3.45rem, 8.4vw, 5.85rem)/1.1 var(--fonte-display); letter-spacing: 0; }
.t-title   { font: 400 clamp(2.7rem, 5.1vw, 3.15rem)/1.18 var(--fonte-display); letter-spacing: 0; }
.t-frase   { font: 400 1.6rem/1.36 var(--fonte-display); }
.t-frase-lg{ font: 400 1.9rem/1.3 var(--fonte-display); }
.t-subtitle{ font: 400 2.175rem/1.26 var(--fonte-display); }

/* Títulos declarados nos <style> das páginas: o prefixo body: é o que ganha do
   atalho font:, que é lido depois deste arquivo. Só ajusta tamanho. */
body h2.t-secao { font-size: clamp(3rem, 6vw, 4.35rem); line-height: 1.12; }
body .topo__marca,
body .marca { font-size: 1.45rem; }
body .rodape__marca { font-size: 1.65rem; }
body .plano__valor { font-size: 2.4rem; }
/* :not([class]) mantém este ajuste nos h2 sem classe (Exclusão de conta) e fora
   dos h2.t-secao da landing, que também vivem dentro de .secao. */
body .caminho h2,
body .secao h2:not([class]),
body .plano h3 { font-size: 2.55rem; }
body .tema b { font-size: 2.1rem; }
body .colecao__fecho {
  font-size: clamp(2.4rem, 4.6vw, 4.05rem);
  line-height: 1.22;
  text-align: center;
  margin-inline: auto;
}
/* No celular o fecho ganha mais 75% — vira uma declaração de seção. */
@media (max-width: 900px) {
  body .colecao__fecho { font-size: 4.2rem; }
}

/* -------------------------------------------------------- lockup da marca ---
   Nome completo do app: "Frases Motivacionais" em cima, a 25% do corpo, e
   MotiCards embaixo com o foco; ícone aquarela à esquerda. O prefixo body
   ganha das declarações font: dos <style> das páginas. */
body a.topo__marca, body a.marca {
  font-size: 2.25rem;
  display: inline-flex; align-items: center; gap: 0.4em;
}
.marca__icone { height: 1.35em; max-height: 48px; width: auto; border-radius: 22%; }
.marca__nomes { display: grid; justify-items: start; line-height: 1; }
.marca__linha1 {
  font: 600 25%/1.3 var(--fonte-corpo);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ----------------------------------------------------------- papel novo ---
   O grão de styles.css traz duas manchas quentes em valor cru; aqui elas
   viram a lavagem verde do tema. */
.papel {
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.55), transparent 42%),
    radial-gradient(circle at 82% 12%, rgba(180, 217, 201, 0.28), transparent 46%),
    radial-gradient(circle at 65% 88%, rgba(196, 198, 176, 0.26), transparent 52%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23f)' opacity='0.055'/%3E%3C/svg%3E");
}
[data-theme='dark'] .papel {
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.06), transparent 42%),
    radial-gradient(circle at 82% 12%, rgba(116, 203, 168, 0.10), transparent 46%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23f)' opacity='0.07'/%3E%3C/svg%3E");
}

/* Sombra do cartão: sai o marrom queimado, entra a tinta verde do tema. */
.cartao {
  box-shadow:
    0 1px 2px rgba(12, 51, 40, 0.05),
    0 8px 24px -8px rgba(12, 51, 40, 0.16);
}
[data-theme='dark'] .cartao {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 8px 24px -8px rgba(0, 0, 0, 0.55);
}

/* =============================================================================
   SOBRE A VERSÃO SVG DA FONTE (spring_rain_svg.otf) — testada e barrada

   1. Chrome não suporta OpenType-SVG. O que aparecia na tela vinha da tabela
      sbix (bitmaps da Apple), não da SVG. Removendo a sbix, o Chrome desenha
      zero pixel: a tabela de contornos do arquivo tem 3 KB para 99 glifos,
      ou seja, é vazia.
   2. Peso: 14,65 MB (8,5 MB de SVG + 6,4 MB de sbix). Só a sbix, para
      Chrome e Safari, dá 6,2 MB — e o Firefox, que não lê sbix, ficaria sem
      título nenhum. A versão solid faz o mesmo desenho com 227 KB.
   3. Acentos: nesse arquivo á, ã, ç e companhia apontam para o glifo da letra
      sem acento. O título sairia "Sua motivacao vira colecao".

   Existe no handoff do design (fora do hosting — o arquivo NÃO está em
   public/assets/fonts) uma versão spring-rain-svg-web.otf com a sbix removida
   e o cmap corrigido (os acentuados voltam para a fonte de reserva). Para
   experimentar, copie-a para assets/fonts, acrescente a face abaixo e ponha 'Spring Rain SVG' na
   frente de --fonte-display. Em Chrome ela renderiza vazia — foi por isso que
   os títulos ficaram na solid.

   @font-face {
     font-family: 'Spring Rain SVG';
     src: url('assets/fonts/spring-rain-svg-web.otf') format('opentype');
     font-weight: 100 900;
     font-display: swap;
   }
   ============================================================================= */