/* ============================================================
   GHYRAZ MODA — Design Tokens
   Todos los valores fundacionales del sistema de diseño.
   Importar primero antes de cualquier otro CSS.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&family=DM+Serif+Display:ital@0;1&display=swap');

:root {
  /* ── Color Palette ── */
  --color-rose:       #F7D9E3;   /* rosa pastel */
  --color-sky:        #D7EAF3;   /* celeste pastel */
  --color-gold:       #FBEFC9;   /* dorado/amarillo pastel */
  --color-pearl:      #F8F4EC;   /* perla, fondo principal */
  --color-text:       #3A3530;   /* texto oscuro principal */
  --color-accent:     #D98A7A;   /* acento cálido — botones, precios */

  /* Derivados */
  --color-white:      #FFFFFF;
  --color-rose-deep:  #EDAFC5;   /* hover en rosa */
  --color-accent-deep:#C4705E;   /* hover en acento */
  --color-text-muted: #7A6F68;   /* texto secundario */
  --color-border:     #EAE4DA;   /* bordes sutiles */
  --color-overlay:    rgba(58, 53, 48, 0.38); /* overlay hero */

  /* ── Typography ── */
  --font-serif:   'Playfair Display', 'DM Serif Display', Georgia, serif;
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;

  --text-xs:    0.75rem;    /*  12px */
  --text-sm:    0.875rem;   /*  14px */
  --text-base:  1rem;       /*  16px */
  --text-lg:    1.125rem;   /*  18px */
  --text-xl:    1.375rem;   /*  22px */
  --text-2xl:   1.75rem;    /*  28px */
  --text-3xl:   2.25rem;    /*  36px */
  --text-4xl:   3rem;       /*  48px */
  --text-5xl:   3.75rem;    /*  60px */

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;

  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-loose:  1.85;

  --tracking-tight:  -0.03em;
  --tracking-normal:  0em;
  --tracking-wide:    0.06em;
  --tracking-widest:  0.18em;

  /* ── Spacing ── */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */

  /* ── Layout ── */
  --container-max:   1280px;
  --container-pad:   clamp(1rem, 5vw, 2.5rem);

  /* ── Radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   22px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs:  0 1px 3px rgba(58,53,48,0.07);
  --shadow-sm:  0 2px 8px rgba(58,53,48,0.09);
  --shadow-md:  0 6px 24px rgba(58,53,48,0.11);
  --shadow-lg:  0 16px 48px rgba(58,53,48,0.14);
  --shadow-card: 0 4px 20px rgba(217,138,122,0.12);

  /* ── Transitions ── */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.64, 0, 0.78, 0);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   180ms;
  --duration-base:   300ms;
  --duration-slow:   500ms;
  --duration-slower: 750ms;

  /* ── Z-index ── */
  --z-base:    0;
  --z-card:    10;
  --z-sticky:  100;
  --z-modal:   200;
  --z-toast:   300;
}

/* ── Global Reset & Base ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-pearl);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: var(--font-sans);
  cursor: pointer;
  border: none;
  background: none;
}

ul, ol {
  list-style: none;
}

/* ── Container util ── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ── Visually hidden (accesibilidad) ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}