/* ============================================================
   LUNE Collection — tokens
   Nenhum hex solto no resto do código: tudo sai daqui.
   ============================================================ */
:root {
  /* --- Base --- */
  --lune-bone:      #FAF7F2;
  --lune-cream:     #F2EDE4;
  --lune-white:     #FFFFFF;

  /* --- Escuros --- */
  --lune-midnight:  #1A1D2E;
  --lune-ink:       #2A2D3A;
  --lune-slate:     #676B78;  /* escurecido p/ passar 4,5:1 também sobre o creme */

  /* --- Metais e acentos --- */
  --lune-gold:      #C9A961;  /* ícones, bordas, hover, texto sobre escuro */
  --lune-gold-dk:   #A88B45;  /* hover do dourado */
  --lune-moonlight: #B8B2C7;

  /* Dourado para TEXTO pequeno sobre fundo claro.
     O #C9A961 sobre bone dá 2,1:1 — reprova em WCAG AA.
     Este tom mantém a leitura de dourado e passa (4,5:1 sobre creme). */
  --lune-gold-text: #7D693C;

  /* --- Funcionais --- */
  --lune-sale:      #A64B4B;
  --lune-success:   #4A7C59;
  --lune-border:    #E5DFD4;

  /* Derivados (rgb cru p/ compor alfas sem hex solto no CSS) */
  --rgb-midnight:   26, 29, 46;
  --rgb-gold:       201, 169, 97;
  --rgb-bone:       250, 247, 242;
  --rgb-sale:       166, 75, 75;
  --rgb-success:    74, 124, 89;

  /* --- Tipografia --- */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-h1:    40px;   /* hero — mobile primeiro */
  --fs-h2:    30px;
  --fs-h3:    22px;
  --fs-prod:  14px;
  --fs-price: 16px;
  --fs-body:  15px;
  --fs-meta:  12px;
  --fs-btn:   13px;
  --fs-nav:   14px;

  --lh-display: 1.15;
  --lh-body:    1.7;
  --lh-prod:    1.4;

  /* --- Espaçamento (escala de 4px) --- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 128px;

  /* --- Bordas --- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-full: 999px;

  /* --- Sombras --- */
  --shadow-sm: 0 1px 3px rgba(var(--rgb-midnight), .06);
  --shadow-md: 0 4px 16px rgba(var(--rgb-midnight), .08);
  --shadow-lg: 0 12px 40px rgba(var(--rgb-midnight), .12);

  /* --- Movimento --- */
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --dur-fast:  200ms;
  --dur-base:  400ms;
  --dur-slow:  700ms;

  /* --- Layout --- */
  --container: 1280px;
  --gutter: 24px;
  --header-h: 60px;
  --grid-gap: 12px;
  --btn-h: 48px;
}

@media (min-width: 768px) {
  :root {
    --fs-h1: 56px; --fs-h2: 38px; --fs-h3: 26px;
    --fs-prod: 15px; --fs-price: 18px; --fs-body: 16px;
    --fs-meta: 13px; --fs-nav: 13px;
    --gutter: 48px; --grid-gap: 24px; --btn-h: 52px;
    --header-h: 68px;
  }
}
@media (min-width: 1100px) {
  :root { --fs-h1: 72px; --fs-h2: 44px; --fs-h3: 28px; }
}