/* =========================================================================
   Jenny Semijoias — Identidade Visual / Design Tokens
   Marca: Jenny Semijoias | Consignado RJ
   Estilo: feminino discreto, premium acessivel, aspiracional honesto
   Base: paleta Champagne Nude + Dourado Champagne + Cafe Profundo
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@400;500;600;700&display=swap');

:root {

  /* =====================================================================
     1. PALETA OFICIAL
     ===================================================================== */

  /* --- Base universal --- */
  --jenny-champagne-nude: #F2E4D7;   /* Fundo principal. Base universal.        */
  --jenny-pearl-white:    #FAF5EE;   /* Fundo claro alternativo. Cartoes.       */
  --jenny-rose-quartz:    #E8C7B8;   /* Cor secundaria. Bloco de destaque.      */
  --jenny-bronze-soft:    #B89070;   /* Cor de apoio. Divisor, subtitulo.       */

  /* --- Assinatura --- */
  --jenny-gold:           #C9A66B;   /* Dourado champagne. Linha fina, selo.    */
  --jenny-coffee:         #2B1B14;   /* Cafe profundo. Texto principal e CTA.   */

  /* --- Funcionais --- */
  --jenny-success:        #7A6A4F;   /* Marrom oliva. Selo, badge.              */
  --jenny-alert:          #B85C38;   /* Terracota. Raro.                        */
  --jenny-whatsapp:       #25D366;
  --jenny-whatsapp-dark:  #128C7E;

  /* --- Overlays --- */
  --jenny-overlay-warm:   linear-gradient(180deg, rgba(43, 27, 20, 0.35) 0%, rgba(43, 27, 20, 0.15) 55%, rgba(43, 27, 20, 0.55) 100%);
  --jenny-overlay-soft:   rgba(43, 27, 20, 0.25);
  --jenny-hairline:       rgba(43, 27, 20, 0.12);

  /* =====================================================================
     2. TIPOGRAFIA
     ===================================================================== */

  --jenny-display:        'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --jenny-body:           'Inter', -apple-system, system-ui, sans-serif;

  /* Escala fluida (mobile-first) */
  --jenny-fs-hero:        clamp(2.75rem, 5.2vw + 1rem, 5.5rem);     /* 44 -> 88px */
  --jenny-fs-display:     clamp(2.25rem, 3.8vw + 1rem, 4rem);       /* 36 -> 64px */
  --jenny-fs-h2:          clamp(1.875rem, 2.6vw + 1rem, 3.25rem);   /* 30 -> 52px */
  --jenny-fs-h3:          clamp(1.375rem, 1.4vw + 0.9rem, 2rem);    /* 22 -> 32px */
  --jenny-fs-h4:          clamp(1.125rem, 0.5vw + 1rem, 1.375rem);  /* 18 -> 22px */
  --jenny-fs-lead:        clamp(1.0625rem, 0.45vw + 0.95rem, 1.25rem);/* 17 -> 20px */
  --jenny-fs-body:        clamp(0.9375rem, 0.15vw + 0.9rem, 1.0625rem);/* 15 -> 17px */
  --jenny-fs-small:       clamp(0.8125rem, 0.1vw + 0.78rem, 0.9375rem);/* 13 -> 15px */
  --jenny-fs-eyebrow:     0.75rem;
  --jenny-fs-number:      clamp(3.5rem, 6vw + 1rem, 6.5rem);

  --jenny-lh-tight:       1.08;
  --jenny-lh-snug:        1.22;
  --jenny-lh-normal:      1.5;
  --jenny-lh-relaxed:     1.7;

  --jenny-tracking-tight: -0.015em;
  --jenny-tracking-normal: 0;
  --jenny-tracking-wide:  0.16em;

  /* =====================================================================
     3. ESPACAMENTO
     ===================================================================== */
  --jenny-space-1:        4px;
  --jenny-space-2:        8px;
  --jenny-space-3:        12px;
  --jenny-space-4:        16px;
  --jenny-space-5:        24px;
  --jenny-space-6:        32px;
  --jenny-space-7:        48px;
  --jenny-space-8:        64px;
  --jenny-space-9:        96px;
  --jenny-space-10:       128px;

  --jenny-section-py:     clamp(4rem, 7vw, 9rem);
  --jenny-section-py-sm:  clamp(3rem, 5vw, 5.5rem);
  --jenny-container:      min(1200px, calc(100% - 2 * var(--jenny-space-5)));
  --jenny-container-narrow: min(820px, calc(100% - 2 * var(--jenny-space-5)));
  --jenny-container-prose: min(680px, calc(100% - 2 * var(--jenny-space-5)));

  /* =====================================================================
     4. RADIUS
     ===================================================================== */
  --jenny-radius-xs:      4px;
  --jenny-radius-sm:      8px;
  --jenny-radius-md:      12px;
  --jenny-radius-lg:      20px;
  --jenny-radius-xl:      28px;
  --jenny-radius-pill:    999px;

  /* =====================================================================
     5. SOMBRAS (tom da marca, nude/cafe)
     ===================================================================== */
  --jenny-shadow-xs:      0 1px 2px rgba(212, 184, 168, 0.18);
  --jenny-shadow-sm:      0 2px 10px rgba(212, 184, 168, 0.22);
  --jenny-shadow-md:      0 8px 24px rgba(184, 144, 112, 0.20);
  --jenny-shadow-lg:      0 18px 48px rgba(184, 144, 112, 0.22);
  --jenny-shadow-cta:     0 10px 28px rgba(201, 166, 107, 0.34);
  --jenny-shadow-cta-hover: 0 14px 36px rgba(201, 166, 107, 0.44);
  --jenny-shadow-cta-dark: 0 10px 28px rgba(43, 27, 20, 0.30);

  /* =====================================================================
     6. ANIMACAO
     ===================================================================== */
  --jenny-ease:           cubic-bezier(0.22, 0.61, 0.36, 1);
  --jenny-ease-emphasis:  cubic-bezier(0.65, 0.05, 0.36, 1);
  --jenny-dur-1:          160ms;
  --jenny-dur-2:          260ms;
  --jenny-dur-3:          420ms;
  --jenny-dur-4:          720ms;
}

/* =========================================================================
   BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--jenny-champagne-nude);
  color: var(--jenny-coffee);
  font-family: var(--jenny-body);
  font-size: var(--jenny-fs-body);
  line-height: var(--jenny-lh-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--jenny-display);
  color: var(--jenny-coffee);
  font-weight: 500;
  letter-spacing: var(--jenny-tracking-tight);
  line-height: var(--jenny-lh-tight);
  margin: 0 0 var(--jenny-space-5) 0;
}

h1 { font-size: var(--jenny-fs-display); font-weight: 600; }
h2 { font-size: var(--jenny-fs-h2);      font-weight: 600; }
h3 { font-size: var(--jenny-fs-h3);      font-weight: 500; }
h4 { font-size: var(--jenny-fs-h4);      font-weight: 600; font-family: var(--jenny-body); letter-spacing: var(--jenny-tracking-normal); }

p { margin: 0 0 var(--jenny-space-4) 0; max-width: 64ch; }

em { font-style: italic; font-family: var(--jenny-display); font-weight: 500; color: var(--jenny-bronze-soft); }

a {
  color: var(--jenny-coffee);
  text-decoration: none;
  border-bottom: 1px solid var(--jenny-gold);
  transition: color var(--jenny-dur-2) var(--jenny-ease), border-color var(--jenny-dur-2) var(--jenny-ease);
}
a:hover { color: var(--jenny-bronze-soft); border-color: var(--jenny-bronze-soft); }

::selection { background: var(--jenny-gold); color: var(--jenny-coffee); }

img { max-width: 100%; height: auto; display: block; }

/* Reveal on scroll */
.jn-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--jenny-dur-4) var(--jenny-ease), transform var(--jenny-dur-4) var(--jenny-ease);
}
.jn-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
.jn-reveal--delay-1 { transition-delay: 80ms; }
.jn-reveal--delay-2 { transition-delay: 160ms; }
.jn-reveal--delay-3 { transition-delay: 240ms; }
.jn-reveal--delay-4 { transition-delay: 320ms; }
@media (prefers-reduced-motion: reduce) {
  .jn-reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}