/* ============================================================
   VARIABLES.CSS — Design Tokens
   Cambia aquí los colores, tipografías y espaciados para
   adaptar la landing a cualquier negocio en segundos.
   ============================================================ */

:root {

  /* --- COLORES PRINCIPALES --- */
  --color-primary:       hsl(200, 80%, 38%);   /* Azul profesional */
  --color-primary-light: hsl(200, 80%, 50%);
  --color-primary-dark:  hsl(200, 80%, 28%);
  --color-primary-bg:    hsl(200, 80%, 97%);   /* Fondo suave para secciones alternas */

  --color-accent:        hsl(35, 95%, 52%);    /* Naranja de acento para CTA */
  --color-accent-dark:   hsl(35, 95%, 42%);
  --color-accent-light:  hsl(35, 95%, 62%);

  /* --- NEUTROS --- */
  --color-white:         hsl(0, 0%, 100%);
  --color-gray-50:       hsl(210, 20%, 98%);
  --color-gray-100:      hsl(210, 16%, 94%);
  --color-gray-200:      hsl(210, 14%, 89%);
  --color-gray-400:      hsl(210, 10%, 65%);
  --color-gray-600:      hsl(210, 10%, 40%);
  --color-gray-800:      hsl(210, 12%, 20%);
  --color-gray-900:      hsl(210, 14%, 10%);

  /* --- SEMÁNTICOS --- */
  --color-success:  hsl(145, 60%, 40%);
  --color-error:    hsl(0,   70%, 50%);
  --color-text:     var(--color-gray-800);
  --color-text-muted: var(--color-gray-600);
  --color-bg:       var(--color-white);

  /* --- TIPOGRAFÍAS --- */
  --font-heading: 'Sora', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* --- TAMAÑOS TIPOGRÁFICOS FLUIDOS --- */
  --text-xs:   clamp(0.70rem, 1vw, 0.78rem);
  --text-sm:   clamp(0.82rem, 1.2vw, 0.9rem);
  --text-base: clamp(0.93rem, 1.5vw, 1rem);
  --text-md:   clamp(1rem,    1.8vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 2vw, 1.375rem);
  --text-xl:   clamp(1.25rem,  2.5vw, 1.75rem);
  --text-2xl:  clamp(1.5rem,   3vw,   2.25rem);
  --text-3xl:  clamp(1.875rem, 4vw,   3rem);
  --text-4xl:  clamp(2.25rem,  5vw,   3.75rem);

  /* --- PESOS --- */
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;
  --weight-extrabold:  800;

  /* --- ESPACIADOS (escala de 4px) --- */
  --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 */

  /* --- BORDES Y RADIOS --- */
  --radius-sm:   0.375rem;
  --radius-md:   0.75rem;
  --radius-lg:   1.25rem;
  --radius-xl:   2rem;
  --radius-full: 9999px;

  /* --- SOMBRAS --- */
  --shadow-sm:  0 1px 3px hsl(210 14% 10% / 0.08), 0 1px 2px hsl(210 14% 10% / 0.06);
  --shadow-md:  0 4px 12px hsl(210 14% 10% / 0.10), 0 2px 4px hsl(210 14% 10% / 0.06);
  --shadow-lg:  0 10px 30px hsl(210 14% 10% / 0.12), 0 4px 8px hsl(210 14% 10% / 0.06);
  --shadow-xl:  0 20px 50px hsl(210 14% 10% / 0.15);
  --shadow-primary: 0 6px 20px hsl(200 80% 38% / 0.30);
  --shadow-accent:  0 6px 20px hsl(35 95% 52% / 0.40);

  /* --- TRANSICIONES --- */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* --- LAYOUT --- */
  --container-max:  1200px;
  --container-pad:  clamp(1rem, 5vw, 2rem);
  --header-height:  70px;

  /* --- BORDE SEPARADOR --- */
  --border-base: 1px solid var(--color-gray-200);
}