/**
 * ENTRE HILOS — Sistema de Diseño
 * Tokens de diseño base (Variables CSS)
 * Inspirado en el arte textil artesanal del Partido de Mar Chiquita
 */

:root {
  /* ----------------------------------------------------
   * PALETA CROMÁTICA PRINCIPAL
   * Extraída del flyer y refinada para accesibilidad WCAG AAA
   * ---------------------------------------------------- */
  --color-parchment: #F8F4EC;         /* Fondo base cálido tipo papel artesanal */
  --color-parchment-soft: #F1E9DB;    /* Fondo suave alternativo */
  --color-parchment-deep: #E7DCB9;    /* Tono cálido para bordes o sutiles contrastes */
  
  --color-terracotta: #B94232;        /* Terracota insignia: calidez, arcilla, hilado */
  --color-terracotta-hover: #9F3426;  /* Terracota intenso para interacción */
  --color-terracotta-light: #FBECE9;  /* Terracota suave para tags y badges */
  --color-terracotta-glow: rgba(185, 66, 50, 0.2);

  --color-ocean: #085466;             /* Azul petróleo oceánico: costa de Mar Chiquita */
  --color-ocean-hover: #06404E;       /* Azul petróleo profundo */
  --color-ocean-light: #E4F1F4;       /* Azul etéreo para fondos secundarios */
  --color-ocean-glow: rgba(8, 84, 102, 0.2);

  --color-mustard: #D88918;           /* Mostaza dorado: sol, tintes, rueca */
  --color-mustard-hover: #B87210;
  --color-mustard-light: #FEF5E7;

  --color-sage: #5F7753;              /* Verde salvia botánico: tintorería natural */
  --color-sage-light: #EEF3EB;

  --color-burgundy: #8C303E;          /* Bordó textil: bordados y detalles */
  --color-burgundy-light: #F8EBEF;

  --color-white: #FFFFFF;
  --color-linen: #FFFCF7;             /* Superficie de tarjetas */
  --color-ink: #142533;               /* Texto principal carbón profundo */
  --color-ink-muted: #4B5E6D;         /* Texto secundario / metadatos */
  --color-ink-faint: #7E909E;         /* Líneas sutiles y placeholders */

  --color-border: rgba(20, 37, 51, 0.08);
  --color-border-warm: rgba(185, 66, 50, 0.18);
  --color-border-ocean: rgba(8, 84, 102, 0.18);

  /* ----------------------------------------------------
   * SISTEMA TIPOGRÁFICO
   * ---------------------------------------------------- */
  --font-serif: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-script: 'Caveat', cursive, sans-serif;

  /* Escala tipográfica fluida mediante clamp() */
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-md: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --text-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
  --text-2xl: clamp(1.875rem, 1.6rem + 1.35vw, 2.5rem);
  --text-3xl: clamp(2.25rem, 1.85rem + 2vw, 3.25rem);
  --text-hero: clamp(2.75rem, 2.2rem + 2.8vw, 4.25rem);

  /* Interlineados */
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-loose: 1.8;

  /* ----------------------------------------------------
   * SISTEMA DE ESPACIADO Y GRID
   * ---------------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6.5rem;

  --container-max: 1240px;
  --container-narrow: 840px;
  --container-pad: clamp(1rem, 4vw, 2.5rem);

  /* ----------------------------------------------------
   * BORDES, SOMBRAS Y ELEVACIÓN
   * ---------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 9999px;

  /* Sombras cálidas con undertone terracota/carbón */
  --shadow-subtle: 0 2px 8px rgba(20, 37, 51, 0.04);
  --shadow-card: 0 8px 24px -4px rgba(20, 37, 51, 0.06), 0 2px 6px -1px rgba(20, 37, 51, 0.04);
  --shadow-hover: 0 16px 36px -6px rgba(20, 37, 51, 0.1), 0 4px 12px -2px rgba(185, 66, 50, 0.08);
  --shadow-popover: 0 24px 48px -8px rgba(20, 37, 51, 0.16);

  /* ----------------------------------------------------
   * TRANSICIONES Y MOVIMIENTO
   * ---------------------------------------------------- */
  --transition-fast: 160ms cubic-bezier(0.2, 0, 0, 1);
  --transition-normal: 280ms cubic-bezier(0.2, 0, 0, 1);
  --transition-smooth: 450ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-spring: 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms !important;
    --transition-normal: 0ms !important;
    --transition-smooth: 0ms !important;
    --transition-spring: 0ms !important;
  }
}