/* ============================================================
   JE PEUX / VITACÉ — Design Tokens (identidade REAL)
   Fonte: vitace_brand_identity_extracted.html + logos oficiais.
   Branco 100% + roxo #634B9E + Antonio/Bebas Neue/Lato.
   ============================================================ */

:root {
  /* ---- Cores ----
     A MARCA-MÃE JE PEUX é NEUTRA (preto/branco premium). As linhas trocam o
     acento via .theme-vitace (roxo vibrante) e .theme-classica (terracota/nude).
     O "acento" do site inteiro vive na família --je-purple* (nome herdado);
     basta sobrescrevê-la num escopo .theme-* que tudo segue. */
  --je-white:        #FFFFFF; /* fundo de página — 100% branco */
  --je-purple:       #1C1A17; /* acento JE PEUX (neutro) */
  --je-purple-deep:  #000000;
  --je-purple-ink:   #1C1A17;
  --je-purple-tint:  #F3F1ED;
  --je-purple-tint2: #E5E2DC;
  --je-yellow:       #1C1A17; /* pop neutralizado na marca-mãe */
  --je-lime:         #8A8578; /* bolinha de selo neutra na marca-mãe */
  --je-ink:          #1A1A1A; /* texto principal */
  --je-ash:          #6E6E73; /* texto secundário */
  --je-line:         #E7E4DE; /* bordas / divisores */
  --je-grey-bg:      #F5F3EF; /* fundo de seção sutil */

  /* aliases semânticos */
  --color-bg: var(--je-white);
  --color-surface: var(--je-white);
  --color-ink: var(--je-ink);
  --color-subdued: var(--je-ash);
  --color-line: var(--je-line);
  --color-accent: var(--je-purple);
  --color-reverse: var(--je-white);

  /* ---- Tipografia (sistema da marca) ---- */
  --font-logo: "Antonio", "Arial Narrow", sans-serif;     /* display gigante VITACÉ / CLÁSSICA */
  --font-brand: "Cormorant", "Cormorant Garamond", Georgia, serif; /* logotipo JE PEUX (serifa elegante) */
  --font-head: "Bebas Neue", "Antonio", sans-serif;       /* títulos, nomes de produto, CTAs */
  --font-body: "Lato", system-ui, -apple-system, sans-serif; /* corpo + tagline espacejada */

  --fw-light: 300; --fw-regular: 400; --fw-medium: 700; --fw-bold: 700;

  /* Escala — Bebas/Antonio são condensadas, então tamanhos maiores */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.4rem;
  --fs-2xl: clamp(2.2rem, 4.5vw, 3.4rem);
  --fs-3xl: clamp(3rem, 7vw, 5.5rem);
  --fs-display: clamp(4rem, 13vw, 11rem);

  --tracking-label: 0.24em;  /* tagline / eyebrow Lato espacejado */
  --tracking-head: 0.01em;   /* títulos Bebas */

  /* ---- Espaçamento / layout ---- */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-pad: clamp(3.5rem, 9vw, 8rem);
  --maxw: 1440px;
  --maxw-text: 62ch;

  --radius-sm: 3px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- Sticky offsets ---- */
  --announce-h: 38px;
  --header-h: 72px;
  --sticky-top: calc(var(--header-h) + 28px);
  --tabnav-h: 56px;

  /* ---- Sombra ---- */
  --shadow-sm: 0 2px 10px rgba(46, 36, 71, 0.06);
  --shadow-md: 0 16px 44px rgba(46, 36, 71, 0.12);
  --shadow-lg: 0 30px 80px rgba(46, 36, 71, 0.22);

  /* ---- Motion (leve: CSS + IO, sem libs) ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 200ms; --dur: 420ms; --dur-slow: 760ms;
  --z-header: 100; --z-tabnav: 80; --z-drawer: 200; --z-atc: 90; --z-mega: 110;

  /* ---- Aliases de compatibilidade (mapeiam a paleta antiga bronze/creme
          para a identidade real roxo/branco — re-skina pages/pdp/vitace.css) ---- */
  --je-bone: var(--je-white);
  --je-cream: var(--je-white);
  --je-ivory: #FBFAFD;            /* superfície quase branca p/ cards */
  --je-reverse: var(--je-white);
  --je-noir: var(--je-purple-ink);
  --je-bronze: var(--je-purple);
  --je-bronze-soft: var(--je-purple-tint2);
  --je-sand: var(--je-purple-tint);
  --je-clay: var(--je-purple);
  --je-success: #5E8C2E;          /* verde legível p/ "em estoque" (lima é claro demais p/ texto) */
}

/* ============================================================
   TEMAS POR LINHA — sobrescrevem o acento num escopo (body ou seção).
   Tudo que usa var(--je-purple*) / aliases segue automaticamente.
   ============================================================ */
.theme-vitace {
  --je-purple:       #6B3FA0; /* roxo vibrante VITACÉ */
  --je-purple-deep:  #2E1A52; /* roxo profundo */
  --je-purple-ink:   #2E1A52;
  --je-purple-tint:  #F1EAF8;
  --je-purple-tint2: #E2D5F2;
  --je-yellow:       #F5D23B; /* amarelo pop */
  --je-lime:         #A8D942; /* verde-lima pop */
  --je-grey-bg:      #F6F2FB;
}
.theme-classica {
  /* Realinhado aos produtos REAIS: sérums azul-claro + óleo preto/rosa,
     fotografados sobre bege quente. Pedra/areia refinada (não terracota). */
  --je-purple:       #9A6A4C; /* clay acento, mais sóbrio */
  --je-purple-deep:  #443225; /* espresso */
  --je-purple-ink:   #36281E;
  --je-purple-tint:  #F2ECE4; /* areia clara */
  --je-purple-tint2: #E3D7C8; /* greige */
  --je-yellow:       #C2A079; /* areia quente */
  --je-lime:         #9A6A4C; /* selo clay */
  --je-grey-bg:      #F5EFE7;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}