/* ==========================================================================
   tokens.css — Sistema de diseño Pepper Lovers
   Único origen de verdad para colores, tipografía, espaciado y movimiento.
   Importar SIEMPRE primero en cualquier hoja de estilos.
   ========================================================================== */

:root {
  /* -- Paleta oficial ------------------------------------------------------ */
  --color-amarillo:    #FFF14D;
  --color-naranja:     #FF5F00;
  --color-rojo:        #FF0000;
  --color-verde-dark:  #002B06;
  --color-verde-mid:   #004E0B;
  --color-blanco:      #FFFFFF;
  --color-negro:       #0A0A0A;

  /* Variante accesible del naranja de marca para TEXTO sobre fondo claro.
     Mismo tono (22.4deg) y saturacion (100%), solo mas oscura.
     #FF5F00 sobre crema da 2.85:1 y no cumple ni el minimo de 3:1.
     #B84400 da 5.08:1 sobre crema y 4.51:1 sobre arena (AA). */
  --color-naranja-texto: #B84400;

  /* -- Neutros derivados (escala de grises calidos) ----------------------- */
  --color-crema:       #FAF7F0;  /* fondo claro principal */
  --color-arena:       #EFEAD8;  /* fondo claro secundario / cards */
  --color-tierra-100:  #E8E2D0;
  --color-tierra-300:  #BFB89F;
  --color-tierra-500:  #6B6750;
  --color-tierra-700:  #2E2C20;

  /* -- Tokens semanticos -------------------------------------------------- */
  --bg-base:           var(--color-crema);
  --bg-elev:           var(--color-blanco);
  --bg-dark:           var(--color-verde-dark);
  --bg-dark-alt:       var(--color-verde-mid);
  --bg-accent:         var(--color-amarillo);

  --text-base:         var(--color-tierra-700);
  --text-muted:        var(--color-tierra-500);
  --text-inverse:      var(--color-blanco);
  --text-muted-inverse: rgba(255, 255, 255, 0.7);   /* secundario sobre oscuro */
  --text-accent:       var(--color-naranja-texto);  /* sobre fondo claro */
  --text-accent-inv:   var(--color-naranja);        /* sobre fondo oscuro */

  /* -- Estados de formulario --------------------------------------------- */
  --color-error:       #C1272D;  /* 5.46:1 sobre crema y sobre blanco (AA) */
  --surface-error:     #FFF5F5;

  /* -- Muestras de color de producto (decorativas, nunca texto) ---------- */
  --swatch-rojo:       #C1272D;
  --swatch-verde:      #2F8F2A;

  /* -- Blanco calido del hero -------------------------------------------- */
  --color-crema-hero:  #FBF8EC;

  --border-soft:       rgba(10, 10, 10, 0.08);
  --border-strong:     rgba(10, 10, 10, 0.18);
  --border-inverse:    rgba(255, 255, 255, 0.16);
  /* Separadores sobre verde-dark: 0.16 casi no se ve en el panel movil */
  --border-inverse-strong: rgba(255, 255, 255, 0.28);

  /* -- Tipografia --------------------------------------------------------- */
  --font-display:      "Fraunces", "Iowan Old Style", "Palatino Linotype",
                       Georgia, serif;
  --font-body:         "Inter", -apple-system, BlinkMacSystemFont,
                       "Segoe UI", Roboto, sans-serif;

  /* Escala tipografica modular (1.250 - Major Third), mobile-first */
  --fs-50:  0.75rem;     /* 12px - micro / overline */
  --fs-75:  0.875rem;    /* 14px - small */
  --fs-100: 1rem;        /* 16px - body base */
  --fs-200: 1.125rem;    /* 18px - body large */
  --fs-300: 1.375rem;    /* 22px - h4 / lead */
  --fs-400: 1.75rem;     /* 28px - h3 */
  --fs-500: 2.25rem;     /* 36px - h2 */
  --fs-600: 3rem;        /* 48px - h1 mobile / display sm */
  --fs-700: 4rem;        /* 64px - display md */
  --fs-800: 5.5rem;      /* 88px - display lg (desktop hero) */

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-base:    1.55;
  --lh-relaxed: 1.7;

  --ls-display:  -0.02em;
  --ls-heading:  -0.01em;
  --ls-overline: 0.18em;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  /* -- Espaciado (escala base 4px) ---------------------------------------- */
  --space-1:  0.25rem;   /* 4 */
  --space-2:  0.5rem;    /* 8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  3rem;      /* 48 */
  --space-8:  4rem;      /* 64 */
  --space-9:  6rem;      /* 96 */
  --space-10: 8rem;      /* 128 */

  /* Padding vertical estandar por seccion (mobile / desktop via clamp) */
  --section-py: clamp(var(--space-8), 8vw, var(--space-10));
  --section-px: clamp(var(--space-4), 5vw, var(--space-8));

  /* -- Layout ------------------------------------------------------------- */
  --container-max:    1280px;
  --container-narrow: 880px;
  --container-wide:   1440px;

  /* -- Radios ------------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   24px;
  --radius-xl:   36px;
  --radius-pill: 999px;

  /* -- Sombras ------------------------------------------------------------ */
  --shadow-xs: 0 1px 2px rgba(10, 10, 10, 0.06);
  --shadow-sm: 0 2px 8px rgba(10, 10, 10, 0.08);
  --shadow-md: 0 8px 24px rgba(10, 10, 10, 0.10);
  --shadow-lg: 0 18px 48px rgba(10, 10, 10, 0.14);
  --shadow-xl: 0 32px 80px rgba(10, 10, 10, 0.20);
  --shadow-glow-amarillo: 0 12px 36px rgba(255, 241, 77, 0.40);
  --shadow-glow-naranja:  0 12px 36px rgba(255, 95, 0,  0.32);

  /* -- Movimiento --------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast:    160ms;
  --dur-base:    240ms;
  --dur-slow:    480ms;
  --dur-slower:  720ms;

  /* -- Z-index ----------------------------------------------------------- */
  --z-base:    1;
  --z-raised:  10;
  --z-nav:     100;
  --z-overlay: 500;
  --z-modal:   1000;
  --z-top:     9999;

  /* -- Breakpoints (referencia para JS / no usar como var en media) ----- */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

/* Preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:   0ms;
    --dur-base:   0ms;
    --dur-slow:   0ms;
    --dur-slower: 0ms;
  }
}