/* =============================================================================
   VETERCALM TOKENS — fuente de verdad del sistema de diseño
   =============================================================================
   Alineado al packaging físico del producto (forest/kraft/bone + amber CTA).
   Idéntico a tailwind.config.mjs del proyecto Astro vetercalm-v2.

   No cargar Tailwind: todo CSS puro, custom properties.
   ============================================================================= */

:root {

  /* -----------------------------------------------------------------------
   * 1. PALETA
   * -------------------------------------------------------------------- */

  /* Forest — verde bosque del packaging real */
  --vc-forest:          #1F3D2E;
  --vc-forest-deep:     #14291E;
  --vc-forest-soft:     #2D5240;
  --vc-forest-mid:      #3F6B54;
  --vc-forest-line:     rgba(31, 61, 46, 0.12);
  --vc-forest-10:       rgba(31, 61, 46, 0.10);
  --vc-forest-15:       rgba(31, 61, 46, 0.15);
  --vc-forest-25:       rgba(31, 61, 46, 0.25);
  --vc-forest-rgb:      31, 61, 46;

  /* Kraft — etiqueta del packaging */
  --vc-kraft:           #E8D5A8;
  --vc-kraft-light:     #F4E9CC;
  --vc-kraft-dark:      #C9B484;

  /* Bone — fondo principal cálido */
  --vc-bone:            #F8F5EE;
  --vc-bone-warm:       #EFE9DC;
  --vc-bone-deep:       #E4DCC8;

  /* Ink — texto */
  --vc-ink:             #14140F;
  --vc-ink-soft:        #4A4A40;
  --vc-ink-mute:        #7A7A6E;

  /* Amber — CTA principal */
  --vc-amber:           #C8862E;
  --vc-amber-hover:     #A86E1F;
  --vc-amber-light:     #E2A655;
  --vc-amber-rgb:       200, 134, 46;


  /* -----------------------------------------------------------------------
   * 2. TIPOGRAFÍA
   * -------------------------------------------------------------------- */

  --vc-font-display:    'Fraunces', ui-serif, Georgia, serif;
  --vc-font-sans:       'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Feature settings Vetercalm */
  --vc-font-features:   'ss01', 'cv11';
  --vc-font-variations: 'opsz' 144, 'SOFT' 50;

  /* Escala responsiva */
  --vc-text-display-xl: clamp(3.5rem, 8vw, 6.5rem);
  --vc-text-display-lg: clamp(2.5rem, 5vw, 4rem);
  --vc-text-display-md: clamp(1.75rem, 3vw, 2.25rem);
  --vc-text-eyebrow:    0.75rem;

  /* Line heights */
  --vc-lh-display-xl:   0.95;
  --vc-lh-display-lg:   1.02;
  --vc-lh-display-md:   1.1;
  --vc-lh-body:         1.6;

  /* Letter spacing */
  --vc-tracking-xl:     -0.025em;
  --vc-tracking-lg:     -0.02em;
  --vc-tracking-md:     -0.015em;
  --vc-tracking-eyebrow: 0.18em;


  /* -----------------------------------------------------------------------
   * 3. LAYOUT Y ESPACIADO
   * -------------------------------------------------------------------- */

  --vc-container-max:   1400px;
  --vc-prose-max:       65ch;
  --vc-section-py:      clamp(96px, 14vh, 192px);

  --vc-radius-sm:       0.125rem;
  --vc-radius-md:       0.5rem;
  --vc-radius-pill:     9999px;


  /* -----------------------------------------------------------------------
   * 4. TRANSICIONES
   * -------------------------------------------------------------------- */

  --vc-ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --vc-duration-fast:   200ms;
  --vc-duration-base:   300ms;
  --vc-duration-slow:   800ms;


  /* -----------------------------------------------------------------------
   * 5. SOMBRAS
   * -------------------------------------------------------------------- */

  --vc-shadow-amber:    0 12px 32px -12px rgba(168, 110, 31, 0.5);
  --vc-shadow-soft:     0 8px 24px -12px rgba(31, 61, 46, 0.15);

}