/* ============================================================
   ARCAICOS BEBIDAS NATURALES
   Design Tokens · tokens.css
   Fuente única de verdad para colores, tipografía y espaciado
   ============================================================
   Color de marca (vino): definido en el PDF de referencia del proyecto:
   site/assets/brand/color-pagina.pdf — relleno vectorial ≈ rgb(77, 18, 12) → #4D120C
   ============================================================ */

:root {

  /* -- Colores principales (alineados a color-pagina.pdf) -- */
  --color-primary:          #4D120C;
  --color-primary-hover:    #6B1A10;
  --color-primary-deep:     #3A0D09;
  --color-primary-light:    rgba(77, 18, 12, 0.08);
  --color-primary-overlay:  rgba(77, 18, 12, 0.80);

  /* -- Fondos -- */
  --color-bg-dark:          #4D120C;
  --color-bg-light:         #FAF7F2;
  --color-bg-cream:         #F3EDE4;
  --color-bg-white:         #FFFFFF;

  /* -- Texto -- */
  --color-text-dark:        #2C2C2C;
  --color-text-body:        #4A4A4A;
  --color-text-muted:       #888888;
  --color-text-light:       #F0EBE3;
  --color-text-white:       #FFFFFF;

  /* -- Bordes -- */
  --color-border:           #E5DDD4;
  --color-border-strong:    #C8BAA8;

  /* -- WhatsApp -- */
  --color-whatsapp:         #25D366;
  --color-whatsapp-hover:   #1DA851;

  /* -- Tipografía -- */
  --font-display:           'Sora', 'Segoe UI', sans-serif;
  --font-body:              'Manrope', 'Segoe UI', sans-serif;

  /* -- Escala tipográfica -- */
  --size-xs:    0.75rem;    /* 12px */
  --size-sm:    0.875rem;   /* 14px */
  --size-base:  1rem;       /* 16px */
  --size-md:    1.125rem;   /* 18px */
  --size-lg:    1.25rem;    /* 20px */
  --size-xl:    1.5rem;     /* 24px */
  --size-2xl:   2rem;       /* 32px */
  --size-3xl:   2.5rem;     /* 40px */
  --size-4xl:   3rem;       /* 48px */
  --size-5xl:   3.75rem;    /* 60px */
  --size-6xl:   4.5rem;     /* 72px */

  /* -- Pesos -- */
  --weight-light:     300;
  --weight-regular:   500;
  --weight-semibold:  600;
  --weight-bold:      800;

  /* -- Interlineado -- */
  --leading-tight:    1.2;
  --leading-snug:     1.4;
  --leading-normal:   1.6;
  --leading-loose:    1.8;

  /* -- Espaciado (base 8px) -- */
  --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 */
  --space-32:   8rem;      /* 128px */

  /* -- Layout -- */
  --container-sm:     640px;
  --container-md:     768px;
  --container-lg:     1024px;
  --container-xl:     1280px;
  --container-2xl:    1440px;
  --navbar-height:    72px;

  /* -- Radios (bloques y fondos rectos; botones pastilla siguen con --radius-full) -- */
  --radius-sm:    0;
  --radius-md:    0;
  --radius-lg:    0;
  --radius-xl:    0;
  --radius-2xl:   0;
  --radius-full:  9999px;

  /* -- Sombras -- */
  --shadow-xs:  0 1px 4px rgba(77, 18, 12, 0.07);
  --shadow-sm:  0 2px 10px rgba(77, 18, 12, 0.09);
  --shadow-md:  0 4px 24px rgba(77, 18, 12, 0.13);
  --shadow-lg:  0 8px 40px rgba(77, 18, 12, 0.18);
  --shadow-xl:  0 16px 64px rgba(77, 18, 12, 0.24);

  /* -- Bloques de página (esquinas rectas; contraste en cortes entre fondos) -- */
  --section-shell-radius: 0;
  --section-shell-radius-accent: 0;
  --section-shell-gap: clamp(14px, 1.7vw, 24px);

  --shadow-section-light:
    0 24px 60px rgba(30, 8, 6, 0.12),
    0 6px 18px rgba(30, 8, 6, 0.07);
  --shadow-section-dark:
    0 28px 72px rgba(0, 0, 0, 0.28),
    0 8px 22px rgba(0, 0, 0, 0.14);
  --shadow-section-inset-light: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  --shadow-section-inset-dark: inset 0 1px 0 rgba(255, 255, 255, 0.16);

  --section-border-light: 1px solid rgba(77, 18, 12, 0.16);
  --section-border-dark: 1px solid rgba(0, 0, 0, 0.28);
  /* Línea más marcada entre secciones (intersección claro / oscuro) */
  --section-seam-accent: 2px solid rgba(77, 18, 12, 0.32);

  /* -- Transiciones -- */
  --transition-fast:    150ms ease;
  --transition-base:    260ms ease;
  --transition-slow:    420ms ease;
  --transition-slower:  620ms cubic-bezier(0.22, 1, 0.36, 1);

  /* -- Movimiento (scroll reveal, hovers, navbar) -- */
  --ease-out-expo:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out-soft:   cubic-bezier(0.45, 0, 0.2, 1);
  --motion-reveal-duration: 0.95s;
  --motion-reveal-distance: 20px;

  /* -- Z-index -- */
  --z-below:      -1;
  --z-base:        0;
  --z-raised:      10;
  --z-dropdown:    100;
  --z-sticky:      200;
  --z-navbar:      300;
  --z-modal:       400;
  --z-fab:         600;
}