/* =============================================================
   DESIGN TOKENS — Challenge Mercado Libre
   Fuente: Variables de Figma (nodes 18:563 · 21:822 · 27:119)
   ============================================================= */

:root {

  /* -----------------------------------------------------------
     PALETA PRIMARIA
  ----------------------------------------------------------- */
  --color-fill-primary:        #ffe600;
  --color-fill-primary-hover:  #807300;
  --color-fill-secondary:      #fcfae3;
  --color-fill-accent:         #3483fa;
  --color-fill-accent-hover:   #1b4380;

  /* -----------------------------------------------------------
     GRADIENTES
     Gradient 1 · MeLi+ / Purple-Pink
     Gradient 2 · Yellow-Orange (hero/banner)
     Gradient 3 · MeLi+ Total / White-Lavender
  ----------------------------------------------------------- */
  --gradient-1: linear-gradient(135deg, #5a238d 30%, #aa1192 100%);
  --gradient-2: linear-gradient(135deg, #ffe600 0%, #ffe600 70%, #ffa800 100%);
  --gradient-3: linear-gradient(135deg, #ffffff 0%, #e1d6ff 100%);

  /* -----------------------------------------------------------
     TEXTO
  ----------------------------------------------------------- */
  --color-text-primary:   #292929;
  --color-text-heading:   #18191b;
  --color-text-secondary: #46494d;
  --color-text-white:     #ffffff;

  /* -----------------------------------------------------------
     ESTADOS — ERROR
  ----------------------------------------------------------- */
  --color-error-primary:   #ea2424;
  --color-error-secondary: #801313;
  --color-error-disable:   #fce3e3;

  /* -----------------------------------------------------------
     ESTADOS — SUCCESS
  ----------------------------------------------------------- */
  --color-success-primary:   #00a650;
  --color-success-secondary: #00803d;
  --color-success-disable:   #e3fcef;

  /* -----------------------------------------------------------
     ESTADOS — WARNING
  ----------------------------------------------------------- */
  --color-warning-primary:   #ff6c0c;
  --color-warning-secondary: #803606;
  --color-warning-disable:   #fcede3;

  /* -----------------------------------------------------------
     ESTADOS — INFO
  ----------------------------------------------------------- */
  --color-info-primary:   #0086ff;
  --color-info-secondary: #1b4380;
  --color-info-disable:   #e3edfc;

  /* -----------------------------------------------------------
     NEUTRALES (escala 900 → White, valores HSL del diseño)
  ----------------------------------------------------------- */
  --color-neutral-900:   hsl(216, 10%, 10%);
  --color-neutral-800:   hsl(216,  9%, 20%);
  --color-neutral-700:   hsl(216,  8%, 30%);
  --color-neutral-600:   hsl(216,  7%, 40%);
  --color-neutral-500:   hsl(216,  6%, 50%);
  --color-neutral-400:   hsl(216,  5%, 60%);
  --color-neutral-300:   hsl(216,  4%, 70%);
  --color-neutral-200:   hsl(216,  3%, 80%);
  --color-neutral-100:   hsl(216,  2%, 90%);
  --color-neutral-white: #ffffff;

  /* -----------------------------------------------------------
     BORDES
  ----------------------------------------------------------- */
  --color-border-primary: #c6c8cc;
  --border-width:         1px;

  /* -----------------------------------------------------------
     ESPACIADO (escala completa del diseño)
  ----------------------------------------------------------- */
  --space-0:  0px;
  --space-2:  2px;
  --space-4:  4px;
  --space-8:  8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;

  /* -----------------------------------------------------------
     BORDER RADIUS
  ----------------------------------------------------------- */
  --radius-0:    0px;
  --radius-4:    4px;    /* 0.25rem */
  --radius-6:    6px;
  --radius-8:    8px;    /* 0.5rem  */
  --radius-16:   16px;   /* 1rem    */
  --radius-full: 9999px;

  /* -----------------------------------------------------------
     SOMBRAS (elevación)
  ----------------------------------------------------------- */
  --shadow-1: 0px 1px 4px 0px rgba(12, 12, 13, 0.05);
  --shadow-2: 0px 2px 4px -2px rgba(12, 12, 13, 0.05),
              0px 4px 6px -2px rgba(12, 12, 13, 0.10);

  /* -----------------------------------------------------------
     ICONOS
  ----------------------------------------------------------- */
  --icon-size-sm:        24px;
  --icon-size-lg:        24px;
  --icon-stroke:         1.5px;
  --icon-color:          #3483fa;   /* Icon/primary   */
  --icon-color-secondary:#18191b;   /* Icon/secondary */

  /* -----------------------------------------------------------
     TIPOGRAFÍA — FAMILIA
  ----------------------------------------------------------- */
  --font-family-base: 'Inter', sans-serif;

  /* -----------------------------------------------------------
     TIPOGRAFÍA — TAMAÑOS (escala del diseño)
  ----------------------------------------------------------- */
  --font-size-xs:  12px;   /* Caption       */
  --font-size-sm:  14px;   /* Body SM       */
  --font-size-md:  16px;   /* Body MD / Button / Subtitle SM */
  --font-size-lg:  18px;   /* Body LG / Subtitle MD          */
  --font-size-xl:  20px;   /* Subtitle L    */
  --font-size-2xl: 24px;   /* Heading XL    */

  /* -----------------------------------------------------------
     TIPOGRAFÍA — PESO
  ----------------------------------------------------------- */
  --font-weight-regular:  400;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* -----------------------------------------------------------
     TIPOGRAFÍA — LINE HEIGHT
  ----------------------------------------------------------- */
  --line-height-xs:  16px;   /* Caption / Overline         */
  --line-height-sm:  18px;   /* Headline/SM (16px text)    */
  --line-height-md:  20px;   /* Body SM (14px text)        */
  --line-height-lg:  24px;   /* Body MD / Button / Sub SM  */
  --line-height-xl:  27px;   /* Body LG / Subtitle MD      */
  --line-height-2xl: 36px;   /* Heading XL                 */

  /* -----------------------------------------------------------
     ESTILOS TIPOGRÁFICOS COMPUESTOS
     Uso: font-size + line-height + weight según rol
  ----------------------------------------------------------- */

  /* Headings */
  --text-heading-xl-size:   var(--font-size-2xl);
  --text-heading-xl-lh:     var(--line-height-2xl);
  --text-heading-xl-weight: var(--font-weight-bold);

  --text-subtitle-l-size:   var(--font-size-xl);
  --text-subtitle-l-lh:     var(--line-height-xl);   /* 27px */
  --text-subtitle-l-weight: var(--font-weight-semibold);

  --text-subtitle-md-size:   var(--font-size-lg);
  --text-subtitle-md-lh:     var(--line-height-xl);  /* 27px — Headline/md */
  --text-subtitle-md-weight: var(--font-weight-semibold);

  --text-subtitle-sm-size:   var(--font-size-md);
  --text-subtitle-sm-lh:     var(--line-height-sm);  /* 18px — Headline/SM */
  --text-subtitle-sm-weight: var(--font-weight-semibold);

  /* Body */
  --text-body-lg-size:   var(--font-size-lg);
  --text-body-lg-lh:     var(--line-height-lg);      /* 24px */
  --text-body-lg-weight: var(--font-weight-regular);

  --text-body-md-size:   var(--font-size-md);
  --text-body-md-lh:     var(--line-height-md);      /* 20px */

  --text-body-sm-size:   var(--font-size-sm);
  --text-body-sm-lh:     var(--line-height-md);      /* 20px — Body SM */

  /* Button */
  --text-button-size:   var(--font-size-md);
  --text-button-lh:     var(--line-height-md);
  --text-button-weight: var(--font-weight-semibold);

  /* Caption */
  --text-caption-size:   var(--font-size-xs);
  --text-caption-lh:     var(--line-height-xs);

}