/* ============================================================
   HOLANA ART — CSS CUSTOM PROPERTIES
   Paleta extraída da logomarca — pastéis intensificados
   ============================================================ */

:root {

  /* ─── Cores — Extraídas da marca, pastéis mais fortes ──────── */

  /* Bases quentes */
  --off-white:       #F5F1E2;   /* ivory quente */
  --cream:           #EDE3C8;   /* creme areia */
  --beige:           #D8C89C;   /* areia dourada */

  /* Família rose / blush — principal da marca */
  --rose-tea:        #E0B4B4;   /* blush rosado forte */
  --rose-light:      #CC9898;   /* rosa antigo */
  --mauve:           #B88080;   /* malva profundo */

  /* Oliva / sálvia — da marca */
  --sage:            #C4C880;   /* oliva quente */
  --sage-light:      #D0D4A8;   /* sálvia clara */
  --green-light:     #ACBA84;   /* sálvia escura */

  /* Dourado / terracota / salmão */
  --floral-yellow:   #D4B46C;   /* dourado floral */
  --terracotta:      #C49078;   /* terracota suave */
  --salmon:          #FEBEA2;   /* salmão da marca */

  /* Lavanda (mantida mas virada a warm lilac) */
  --lavender:        #C8C4A0;   /* areia lilás — neutro quente */
  --lilac:           #B8B490;   /* bege escuro */

  /* Neutros quentes */
  --gray-elegant:    #8C7868;   /* cinza quente */
  --gray-mid:        #B8A898;   /* cinza médio quente */
  --gray-soft:       #D8CEC0;   /* cinza suave */

  /* Texto */
  --text:            #2C2018;   /* escuro quente — legível */
  --text-light:      #6C5840;   /* médio quente */
  --white:           #FEFCF5;   /* branco quente */

  /* ─── Gradientes — derivados da marca ──────────────────────── */

  /* Hero: ivory → areia rosada → creme dourado */
  --gradient-hero:    linear-gradient(
    135deg,
    #F5F1E2 0%,
    #EDD8C4 45%,
    #EDD4C4 100%
  );

  /* Cards */
  --gradient-card:    linear-gradient(
    180deg,
    #FEFCF5 0%,
    #F5F1E2 100%
  );

  /* Botões: blush → dourado quente */
  --gradient-button:  linear-gradient(
    135deg,
    #E0B4B4 0%,
    #D4A86C 100%
  );

  /* Seções */
  --gradient-section: linear-gradient(
    180deg,
    #F5F1E2 0%,
    #EDE3C8 100%
  );

  /* Rose */
  --gradient-rose:    linear-gradient(135deg, #E0B4B4 0%, #CC9898 100%);
  /* Sage */
  --gradient-sage:    linear-gradient(135deg, #D0D4A8 0%, #ACBA84 100%);
  /* Footer */
  --gradient-footer:  linear-gradient(180deg, #EDE3C8 0%, #D8C89C 100%);
  /* Overlay */
  --gradient-overlay: linear-gradient(
    180deg,
    rgba(245,241,226,0) 0%,
    rgba(245,241,226,0.96) 100%
  );

  /* ─── Tipografia ─────────────────────────────────────────── */
  --font-title:    'Playfair Display', Georgia, serif;
  --font-subtitle: 'Cormorant Garamond', Georgia, serif;
  --font-body:     'Poppins', system-ui, sans-serif;

  /* ─── Escala tipográfica ──────────────────────────────────── */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  2.5rem;
  --text-4xl:  3.5rem;
  --text-5xl:  4.5rem;
  --text-hero: 6rem;

  /* ─── Espaçamentos ───────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;

  /* ─── Raios de borda ─────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-2xl:  48px;
  --radius-full: 9999px;

  /* ─── Sombras — tons quentes da marca ───────────────────── */
  --shadow-xs:   0 1px 4px rgba(44, 32, 24, 0.04);
  --shadow-sm:   0 2px 10px rgba(44, 32, 24, 0.06);
  --shadow-md:   0 4px 24px rgba(44, 32, 24, 0.08);
  --shadow-lg:   0 8px 48px rgba(44, 32, 24, 0.10);
  --shadow-xl:   0 16px 64px rgba(44, 32, 24, 0.12);
  --shadow-card: 0 4px 32px rgba(184, 128, 100, 0.14);
  --shadow-btn:  0 4px 20px rgba(212, 168, 108, 0.40);
  --shadow-rose: 0 4px 24px rgba(224, 180, 180, 0.45);

  /* ─── Transições ─────────────────────────────────────────── */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --transition-fast:   0.15s var(--ease-smooth);
  --transition-base:   0.35s var(--ease-smooth);
  --transition-slow:   0.65s var(--ease-smooth);
  --transition-slower: 0.9s  var(--ease-smooth);

  /* ─── Layout ──────────────────────────────────────────────── */
  --container-max:  1280px;
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1200px;

  --header-height:        80px;
  --header-height-scroll: 64px;

  /* ─── Z-index ─────────────────────────────────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-above:     10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;
}