/* ============================================
   VARIABLES Y TOKENS DE DISEÑO
   Proyecto Web - Sistema de Diseño
   ============================================ */

:root {

  /* -------------------------------------------
     PALETA DE COLORES PRINCIPAL
  ------------------------------------------- */

  /* Azules y Teals */
  --color-teal-light:     #27C0D0;
  --color-teal-dark:      #057388;

  /* Naranjas y Ámbar */
  --color-orange:         #DE691C;
  --color-amber:          #F5A73D;

  /* -------------------------------------------
     DEGRADADOS
  ------------------------------------------- */

  --gradient-teal:        linear-gradient(135deg, #27C0D0 0%, #057388 100%);
  --gradient-orange:      linear-gradient(135deg, #F5A73D 0%, #DE691C 100%);
  --gradient-hero:        linear-gradient(135deg, #057388 0%, #27C0D0 50%, #F5A73D 100%);
  --gradient-dark:        linear-gradient(135deg, #03404d 0%, #057388 100%);
  --gradient-card:        linear-gradient(145deg, rgba(39,192,208,0.08) 0%, rgba(5,115,136,0.04) 100%);

  /* -------------------------------------------
     COLORES NEUTROS Y DE FONDO
  ------------------------------------------- */

  --color-white:          #FFFFFF;
  --color-off-white:      #F8FAFB;
  --color-gray-50:        #F0F4F5;
  --color-gray-100:       #E1E8EA;
  --color-gray-200:       #C3D1D5;
  --color-gray-400:       #8AAAB0;
  --color-gray-600:       #4D7078;
  --color-gray-800:       #1E3A40;
  --color-dark:           #0D2126;

  /* -------------------------------------------
     COLORES SEMÁNTICOS
  ------------------------------------------- */

  --color-success:        #27C0D0;
  --color-warning:        #F5A73D;
  --color-error:          #E05050;
  --color-info:           #27C0D0;

  /* -------------------------------------------
     TIPOGRAFÍA
  ------------------------------------------- */

  --font-display:         'Syne', sans-serif;
  --font-body:            'DM Sans', sans-serif;
  --font-mono:            'JetBrains Mono', monospace;

  /* Escala de tamaños (fluid type) */
  --text-xs:              clamp(0.75rem,  1.5vw, 0.8125rem);
  --text-sm:              clamp(0.875rem, 1.8vw, 0.9375rem);
  --text-base:            clamp(1rem,     2vw,   1.0625rem);
  --text-lg:              clamp(1.125rem, 2.2vw, 1.25rem);
  --text-xl:              clamp(1.25rem,  2.5vw, 1.5rem);
  --text-2xl:             clamp(1.5rem,   3vw,   2rem);
  --text-3xl:             clamp(1.875rem, 4vw,   2.5rem);
  --text-4xl:             clamp(2.25rem,  5vw,   3.25rem);
  --text-5xl:             clamp(2.75rem,  6vw,   4.5rem);

  /* Pesos */
  --font-regular:         400;
  --font-medium:          500;
  --font-semibold:        600;
  --font-bold:            700;
  --font-extrabold:       800;

  /* Interlineado */
  --leading-tight:        1.1;
  --leading-snug:         1.3;
  --leading-normal:       1.6;
  --leading-relaxed:      1.75;

  /* Espaciado entre letras */
  --tracking-tight:      -0.03em;
  --tracking-normal:      0em;
  --tracking-wide:        0.05em;
  --tracking-wider:       0.1em;

  /* -------------------------------------------
     ESPACIADO (escala de 8px)
  ------------------------------------------- */

  --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.25rem;   /* 4px  */
  --radius-md:            0.5rem;    /* 8px  */
  --radius-lg:            0.75rem;   /* 12px */
  --radius-xl:            1rem;      /* 16px */
  --radius-2xl:           1.5rem;    /* 24px */
  --radius-full:          9999px;

  --border-width:         1px;
  --border-color:         var(--color-gray-100);
  --border-color-accent:  rgba(39, 192, 208, 0.3);

  /* -------------------------------------------
     SOMBRAS
  ------------------------------------------- */

  --shadow-sm:            0 1px 3px rgba(5, 115, 136, 0.08),
                          0 1px 2px rgba(5, 115, 136, 0.04);

  --shadow-md:            0 4px 12px rgba(5, 115, 136, 0.1),
                          0 2px 6px rgba(5, 115, 136, 0.06);

  --shadow-lg:            0 10px 30px rgba(5, 115, 136, 0.12),
                          0 4px 12px rgba(5, 115, 136, 0.08);

  --shadow-xl:            0 20px 50px rgba(5, 115, 136, 0.15),
                          0 8px 20px rgba(5, 115, 136, 0.1);

  --shadow-teal:          0 8px 24px rgba(39, 192, 208, 0.35);
  --shadow-orange:        0 8px 24px rgba(222, 105, 28, 0.35);
  --shadow-glow:          0 0 40px rgba(39, 192, 208, 0.2);

  /* -------------------------------------------
     TRANSICIONES Y ANIMACIONES
  ------------------------------------------- */

  --transition-fast:      150ms ease;
  --transition-base:      250ms ease;
  --transition-slow:      400ms ease;
  --transition-spring:    300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* -------------------------------------------
     LAYOUT Y CONTENEDORES
  ------------------------------------------- */

  --container-sm:         640px;
  --container-md:         768px;
  --container-lg:         1024px;
  --container-xl:         1280px;
  --container-2xl:        1440px;

  --container-padding:    clamp(1rem, 5vw, 2rem);

  /* -------------------------------------------
     Z-INDEX
  ------------------------------------------- */

  --z-below:             -1;
  --z-base:               0;
  --z-raised:             10;
  --z-dropdown:           100;
  --z-sticky:             200;
  --z-overlay:            300;
  --z-modal:              400;
  --z-toast:              500;
}