/* ================================================================
   JANASCAKES — DESIGN SYSTEM v1.1
   Tokens · Reset · Animações · Utilitários · Componentes base
   ================================================================ */

/* ══ 1. TOKENS ══════════════════════════════════════════════════ */
:root {

  /* ── Cores: Brand (Paleta Oficial Jana's Cakes) ────────────── */
  /* Cores da marca */
  --blush:          #F9EDED;   /* Blush Creme — BASE / BG */
  --petal-pink:     #F9D2D2;   /* Petal Pink — Rosa Suave */
  --rose:           #EE8B9D;   /* Confeitaria Rose — Rosa Principal */
  --gold:           #F3AB56;   /* Jana Gold — Dourado Premium */
  --green:          #1AAB5F;   /* Verde Conversão — CTA Principal */

  /* Cores do sistema (derivadas) */
  --dark:           #3D1A1E;   /* Chocolate Escuro — Texto Principal */
  --dark2:          #2A1015;   /* Chocolate Profundo — variante escura */
  --terra:          #7D4850;   /* Marrom Morno — Texto Secundário */
  --white:          #FFFAF3;   /* Cream White — Cards / Nav */
  --gold-lt:        #C88B5A;   /* Deep Gold — Hover Dourado */

  /* Aliases de compatibilidade */
  --cream:     var(--blush);
  --peach:     var(--petal-pink);
  --peach-alt: var(--petal-pink);
  --green-lt:  #2DC76E;        /* verde mais claro para hover */

  /* ── Cores: Texto ──────────────────────────────────────────── */
  --text-body:    #3D1A1E;    /* parágrafos e descrições */
  --text-muted:   #7D4850;    /* texto subdued, notas */
  --text-soft:    #9E7B80;    /* captions, meta, subtítulos */
  --text-dim:     #AAAAAA;    /* terciário, preço original */
  --text-light:   #CCCCCC;    /* texto em fundo escuro (secundário) */
  --text-on-dark: #DDDDDD;    /* texto em fundo escuro (primário) */
  --text-footer:  #7D4850;    /* rodapé */

  /* ── Cores: Semânticas ─────────────────────────────────────── */
  --error:          #C62828;
  --error-bg:       #FFF0F0;
  --error-border:   #FFB3B3;
  --success-bg:     #F0FFF4;
  --success-border: #A5D6A7;

  /* ── Tipografia: Famílias ──────────────────────────────────── */
  --font-script:  'Great Vibes', cursive;
  --font-display: 'Cormorant Garamond', serif;
  --font-body:    'Montserrat', sans-serif;

  /* ── Tipografia: Pesos ─────────────────────────────────────── */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-extra:   800;
  --fw-black:   900;

  /* ── Tipografia: Tamanhos ──────────────────────────────────── */
  --fs-2xs:    .72rem;
  --fs-xs:     .78rem;
  --fs-sm:     .82rem;
  --fs-base:   .90rem;
  --fs-md:     .95rem;
  --fs-lg:    1.05rem;
  --fs-xl:    1.15rem;
  --fs-2xl:   1.25rem;
  --fs-3xl:   1.80rem;
  --fs-4xl:   2.40rem;
  /* Fluid / responsivo */
  --fs-hero:    clamp(2rem,   4vw,   3.2rem);
  --fs-section: clamp(1.8rem, 3vw,   2.6rem);
  --fs-final:   clamp(1.8rem, 3.5vw, 2.8rem);

  /* ── Espaçamento ───────────────────────────────────────────── */
  --sp-1:   4px;   --sp-2:   8px;   --sp-3:  12px;
  --sp-4:  16px;   --sp-5:  20px;   --sp-6:  24px;
  --sp-7:  28px;   --sp-8:  32px;   --sp-10: 40px;
  --sp-12: 48px;   --sp-14: 56px;   --sp-16: 64px;
  --sp-20: 80px;   --sp-25: 100px;

  /* Ritmo de seção */
  --section-py: var(--sp-20);
  --section-px: var(--sp-6);

  /* ── Border Radius ─────────────────────────────────────────── */
  --r-sm:   8px;
  --r-md:   16px;
  --r-lg:   20px;
  --r-xl:   24px;
  --r-2xl:  28px;
  --r-pill: 50px;

  /* ── Sombras ───────────────────────────────────────────────── */
  --shadow-xs: 0  4px 16px rgba(61,26,30,.08);
  --shadow-sm: 0  8px 24px rgba(61,26,30,.15);
  --shadow-md: 0 12px 36px rgba(61,26,30,.18);
  --shadow-lg: 0 16px 48px rgba(61,26,30,.25);
  --shadow-green:    0  6px 30px rgba(26,171,95,.40);
  --shadow-green-lg: 0  6px 40px rgba(26,171,95,.50);

  /* ── Transições ────────────────────────────────────────────── */
  --t-fast: .2s ease;
  --t-base: .3s ease;
  --t-slow: .6s ease;

  /* ── Z-index ───────────────────────────────────────────────── */
  --z-header: 999;
  --z-float:  998;

  /* ── Larguras máximas ──────────────────────────────────────── */
  --mw-hero:   1200px;
  --mw-wide:   1100px;
  --mw-narrow:  900px;
  --mw-card:    760px;
  --mw-tight:   600px;
  --mw-cta:     520px;
}


/* ══ 2. RESET ═══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--white);
  color: var(--dark);
  overflow-x: hidden;
}


/* ══ 3. ANIMAÇÕES ═══════════════════════════════════════════════ */
@keyframes shimmer {
  0%   { left: -75%; }
  100% { left: 150%; }
}
@keyframes float1 {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-14px); }
}
@keyframes float2 {
  0%, 100% { transform: translateY(-8px); }
  50%       { transform: translateY(6px); }
}
@keyframes float3 {
  0%, 100% { transform: translateY(4px); }
  50%       { transform: translateY(-10px); }
}
@keyframes glow-btn {
  0%, 100% { box-shadow: var(--shadow-green); }
  50%       { box-shadow: 0 6px 50px rgba(26,171,95,.8); }
}
@keyframes pulse-badge {
  0%, 100% { box-shadow: 0 0 0 0   rgba(243,171,86,.5); }
  50%       { box-shadow: 0 0 0 8px rgba(243,171,86,0);  }
}
@keyframes orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}


/* ══ 4. UTILITÁRIOS ═════════════════════════════════════════════ */

/* Fundo bolinhas */
.polka { position: relative; }
.polka::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(243,171,86,.12) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
  pointer-events: none;
}

/* Divisor wave */
.wave { line-height: 0; }
.wave svg { display: block; width: 100%; }
.wave.flip svg { transform: scaleY(-1); }

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--t-slow), transform var(--t-slow);
}
.reveal.show { opacity: 1; transform: none; }


/* ══ 5. COMPONENTES ═════════════════════════════════════════════ */

/* ── Título de seção ── */
.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-section);
  color: var(--dark);
  text-align: center;
  margin-bottom: var(--sp-14);
}
.section-title span { color: var(--gold); }

/* ── Botão CTA (base compartilhada) ── */
.btn-hero,
.btn-buy,
.btn-final,
.btn-float {
  position: relative;
  overflow: hidden;
  background: var(--green);
  color: #fff;
  font-family: var(--font-body);
  font-weight: var(--fw-extra);
  border-radius: var(--r-pill);
  text-decoration: none;
  letter-spacing: .5px;
  box-shadow: var(--shadow-green);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  animation: glow-btn 2s ease-in-out infinite;
}
.btn-hero::after,
.btn-buy::after,
.btn-final::after {
  content: '';
  position: absolute; top: -50%; left: -75%;
  width: 50%; height: 200%;
  background: rgba(255,255,255,.22);
  transform: skewX(-20deg);
  animation: shimmer 2.5s infinite;
}
.btn-hero:hover,
.btn-buy:hover,
.btn-final:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 40px rgba(26,171,95,.5);
}

/* ── Chips / Tags ── */
.chip {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semi);
  padding: 4px 12px;
  border-radius: var(--r-pill);
}
.chip-gold  { background: rgba(243,171,86,.15); color: var(--gold); }
.chip-terra { background: rgba(125, 72,80,.15); color: var(--terra); }
.chip-dark  { background: rgba( 61, 26,30,.10); color: var(--dark); }

/* ── Badge inline ── */
.badge-label {
  display: inline-block;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 6px 16px;
  border-radius: var(--r-pill);
}
.badge-label--cream { background: var(--cream); color: var(--terra); }
.badge-label--dark  { background: var(--dark);  color: var(--gold); }
.badge-label--gold  { background: var(--gold);  color: #fff; }

/* ── Card base ── */
.card-base {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base);
}
.card-base:hover { transform: translateY(-6px); }