/* ==========================================================================
   CLUBE JARDIIM — tokens visuais compartilhados
   Fonte da verdade: tela1_aprovada_v3.html (cores/fontes/espaçamentos exatos)
   + kit/02_ESPECIFICACAO_VISUAL_ULTRA_DETALHADA.md (paleta oficial)
   ========================================================================== */

@font-face {
  font-family: 'Mistrully';
  src: url('../fonts/Mistrully_patched.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Verdes */
  --verde-tela: #123F33;      /* fundo cheio das telas escuras (tela1 e tela4) — cor exata aprovada */
  --verde-escuro: #0E3B30;    /* verde principal da marca */
  --verde-sombra: #0A2D25;    /* sombra / profundidade */
  --verde-secundario: #11463B;/* variação secundária */

  /* Terracota */
  --terracota: #894022;       /* terracota principal (marca) */
  --terracota-media: #A6512E; /* botão principal (cor exata aprovada em tela1) */
  --terracota-clara: #B45C35; /* hover / destaques (cor exata aprovada em tela1) */
  --terracota-script: #C0693C; /* script/frases afetivas sobre fundo escuro (cor exata aprovada em tela1) */

  /* Dourados — amostrados por pixel da arte de referência (kit/02 e kit/04),
     usados só nos elementos que a referência mostra em dourado (nível do
     sócio e a assinatura "feliz aniversário"), não substituem o terracota
     da marca em nenhum outro lugar */
  --dourado-mostarda: #C9A24A;   /* "SEMENTE" no cartão (tela 2) */
  --dourado-champanhe: #E3D2A0;  /* "feliz aniversário !" (tela 4) */

  /* Neutros */
  --off-white: #F6F2EA;       /* off-white principal */
  --branco: #FFFFFF;
  --cinza-texto: #5E6763;     /* texto secundário sobre fundo claro */
  --divisor: rgba(14,59,48,.10);

  /* Texto sobre fundo escuro */
  --texto-claro: #F6F2EA;
  --texto-claro-suave: rgba(246,242,234,.78);
  --campo-texto: #F0EBDF;

  /* Tipografia */
  --fonte-titulo: 'Barrio', cursive;
  --fonte-script: 'Mistrully', cursive;
  --fonte-corpo: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  --fonte-nome: 'Cormorant Garamond', serif; /* serifa fina — usada só no nome grande da tela 4, conforme a referência */

  /* Frame */
  --frame-w: 390px;
  --frame-h: 844px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  overscroll-behavior: none;
}

/* Fundo do html/body sempre igual ao fundo real da tela (nunca o bege do
   mockup de desktop) — evita o "flash" bege do overscroll elástico no iOS */
body:has(.phone.fundo-escuro) { background: var(--verde-tela); }
body:has(.phone.fundo-claro) { background: var(--off-white); }

body {
  background: #E8E4DB;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 16px;
  font-family: var(--fonte-corpo);
}

/* Container "telefone" — usado por todas as telas para manter a proporção 390x844.
   Cor de fundo única (sem overlay/gradiente por cima) — html, body e .phone usam
   exatamente o mesmo hex, pra nunca aparecer faixa de tom diferente. */
.phone {
  width: var(--frame-w);
  height: var(--frame-h);
  position: relative;
  overflow: hidden;
  border-radius: 44px;
  box-shadow: 0 30px 60px rgba(14,59,48,.35);
  display: flex;
  flex-direction: column;
}

.phone.fundo-escuro { background: var(--verde-tela); }
.phone.fundo-claro { background: var(--off-white); }

/* Textura de folhagem de fundo (canto inferior esquerdo, telas escuras) */
.foliage {
  position: absolute;
  left: -70px;
  bottom: -45px;
  width: 300px;
  opacity: .55;
  transform: rotate(8deg);
  pointer-events: none;
}

@media (max-width: 430px) {
  html, body { height: 100vh; height: 100dvh; overflow: hidden; }
  body { padding: 0; }
  .phone { width: 100%; height: 100vh; height: 100dvh; border-radius: 0; box-shadow: none; }
}

/* Área de conteúdo principal — ocupa todo o espaço que sobra dentro do
   .phone (que é flex-column), com a navegação inferior como irmã real no
   fluxo (nunca sobreposta). Rola internamente só quando o conteúdo exigir. */
.screen {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  overscroll-behavior: contain;
}

a { cursor: pointer; }