:root {
  /* The storefront intentionally supports a light palette only. */
  color-scheme: light;
  color-scheme: only light;

  /* ── Paleta Jhonny Stylos (identidade visual da cliente) ─
     Só existem 3 cores na ID: #f8f8f8 · #ffbdc6 · #ffd0d3.
     O resto é derivado da mesma matiz rosa, só pra garantir
     legibilidade de texto (rosa claro sobre branco não lê). */
  --brand-gray:         #f8f8f8;
  --brand-pink:         #ffbdc6;
  --brand-pink-light:   #ffd0d3;

  /* Preenchimentos (botões, badges, bordas ativas) — texto escuro por cima */
  --color-primary:      #ffbdc6;
  --color-primary-hover:#ffa3af;
  --color-accent:       #ffd0d3;
  --color-accent-hover: #ffbdc6;
  --color-cream:        #ffd0d3;

  /* Rosa "de texto" — mesma matiz, escuro o bastante pra ler sobre claro (6,7:1 no branco) */
  --color-primary-text: #9b3b48;
  /* Rosa médio pra elementos gráficos (estrelas, ícones) */
  --color-primary-mid:  #e8798c;

  /* Neutros com leve tom rosado */
  --color-text:         #2d2226;
  --color-text-muted:   #6b5a5f;
  --color-text-light:   #8a7a7e;

  --color-border:       #ffd0d3;
  --color-border-dark:  #ffbdc6;
  --color-bg:           #ffffff;
  --color-bg-alt:       #f8f8f8;
  --color-bg-dark:      #ffbdc6;
  --color-white:        #ffffff;
  --color-black:        #000000;

  /* ── Gradientes da marca (rosa → rosa claro) ─────────── */
  --gradient-brand:     linear-gradient(135deg, #ffbdc6 0%, #ffd0d3 100%);
  --gradient-brand-h:   linear-gradient(90deg,  #ffbdc6 0%, #ffd0d3 50%, #ffbdc6 100%);

  /* ── Tipografia ──────────────────────────────────────── */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body:    'Poppins', system-ui, sans-serif;
  --font-size-xs:   0.75rem;
  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-lg:   1.125rem;
  --font-size-xl:   1.5rem;
  --font-size-2xl:  2rem;
  --font-size-3xl:  2.75rem;

  /* ── Espaçamento ─────────────────────────────────────── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;

  /* ── Layout ──────────────────────────────────────────── */
  --container-max: 1320px;
  --container-pad: clamp(16px, 4vw, 60px);
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* ── Transições ──────────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* ── Sombras ─────────────────────────────────────────── */
  --shadow-card:  0 2px 12px rgba(255,189,198,.25);
  --shadow-hover: 0 8px 28px rgba(255,189,198,.45);
}