/* ============================================================
   AYSTEC SOLUTIONS — Design Tokens
   Paleta extraída del logotipo oficial
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     COLORES DE MARCA
     Azul eléctrico del logotipo + derivados
  ---------------------------------------------------------- */

  /* Primario — Azul Aystec */
  --color-primary-50:  #EBF2FF;
  --color-primary-100: #D1E4FF;
  --color-primary-200: #A8CAFF;
  --color-primary-300: #74AAFF;
  --color-primary-400: #4A8EF5;
  --color-primary-500: #2266E3;   /* Base — extraído del "A" del logo */
  --color-primary-600: #1B55CC;
  --color-primary-700: #1445AD;
  --color-primary-800: #0F3488;
  --color-primary-900: #0A2468;

  /* Acento — Azul eléctrico / cian del logo */
  --color-accent-50:  #E6F6FF;
  --color-accent-100: #BAE8FF;
  --color-accent-200: #7DD4FA;
  --color-accent-300: #38BDF8;
  --color-accent-400: #0EA5E9;
  --color-accent-500: #0990D6;   /* Cian eléctrico del escudo */
  --color-accent-600: #0774AD;

  /* Navy — Fondo oscuro del logotipo */
  --color-navy-900: #0B1220;
  --color-navy-800: #111A2E;
  --color-navy-700: #172238;
  --color-navy-600: #1E2D48;
  --color-navy-500: #263659;
  --color-navy-400: #344A72;

  /* Plateado metálico — Escudo del logo */
  --color-steel-50:  #F4F6F9;
  --color-steel-100: #E8ECF2;
  --color-steel-200: #D0D8E6;
  --color-steel-300: #B0BFCF;
  --color-steel-400: #8FA2B8;
  --color-steel-500: #6E84A0;
  --color-steel-600: #526780;


  /* ----------------------------------------------------------
     PALETA SEMÁNTICA (luz)
  ---------------------------------------------------------- */

  --color-brand:         var(--color-primary-500);
  --color-brand-hover:   var(--color-primary-600);
  --color-brand-light:   var(--color-primary-100);
  --color-brand-subtle:  var(--color-primary-50);

  --color-accent:        var(--color-accent-500);
  --color-accent-hover:  var(--color-accent-600);
  --color-accent-light:  var(--color-accent-100);

  /* Éxito */
  --color-success-500: #16A34A;
  --color-success-100: #DCFCE7;
  --color-success-600: #15803D;

  /* Advertencia */
  --color-warning-500: #D97706;
  --color-warning-100: #FEF3C7;

  /* Error */
  --color-error-500: #DC2626;
  --color-error-100: #FEE2E2;


  /* ----------------------------------------------------------
     SUPERFICIES Y FONDOS (tema claro)
  ---------------------------------------------------------- */

  --bg-base:       #F8FAFF;    /* Fondo principal — blanco azulado muy sutil */
  --bg-surface:    #FFFFFF;    /* Tarjetas y paneles */
  --bg-subtle:     #F0F4FF;    /* Secciones alternas */
  --bg-muted:      #E8EDF8;    /* Inputs, chips */
  --bg-overlay:    rgba(11, 18, 32, 0.55);  /* Modales / overlays */

  /* Gradiente hero — inspirado en el fondo del logo */
  --gradient-hero:     linear-gradient(135deg, var(--color-navy-900) 0%, var(--color-navy-700) 50%, var(--color-primary-900) 100%);
  --gradient-brand:    linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-400) 100%);
  --gradient-accent:   linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-accent-500) 100%);
  --gradient-steel:    linear-gradient(135deg, var(--color-steel-100) 0%, var(--color-steel-200) 100%);
  --gradient-glow:     radial-gradient(ellipse at center, rgba(34, 102, 227, 0.15) 0%, transparent 70%);


  /* ----------------------------------------------------------
     TEXTO
  ---------------------------------------------------------- */

  --text-primary:   #0D1B3E;   /* Navy del logo para texto principal */
  --text-secondary: #344A72;   /* Navy medio */
  --text-muted:     #6E84A0;   /* Steel para texto de apoyo */
  --text-disabled:  #A8B8CC;
  --text-inverse:   #FFFFFF;
  --text-brand:     var(--color-primary-500);
  --text-accent:    var(--color-accent-500);


  /* ----------------------------------------------------------
     BORDES Y SEPARADORES
  ---------------------------------------------------------- */

  --border-subtle:  #E8ECF2;   /* Steel 100 */
  --border-default: #D0D8E6;   /* Steel 200 */
  --border-strong:  #B0BFCF;   /* Steel 300 */
  --border-brand:   var(--color-primary-300);
  --border-focus:   var(--color-primary-500);

  --border-radius-xs:  4px;
  --border-radius-sm:  6px;
  --border-radius-md:  10px;
  --border-radius-lg:  16px;
  --border-radius-xl:  24px;
  --border-radius-2xl: 32px;
  --border-radius-full: 9999px;


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

  --shadow-xs:  0 1px 2px rgba(13, 27, 62, 0.05);
  --shadow-sm:  0 2px 6px rgba(13, 27, 62, 0.07), 0 1px 2px rgba(13, 27, 62, 0.04);
  --shadow-md:  0 4px 16px rgba(13, 27, 62, 0.10), 0 2px 4px rgba(13, 27, 62, 0.06);
  --shadow-lg:  0 8px 32px rgba(13, 27, 62, 0.13), 0 4px 8px rgba(13, 27, 62, 0.07);
  --shadow-xl:  0 16px 48px rgba(13, 27, 62, 0.16), 0 8px 16px rgba(13, 27, 62, 0.08);
  --shadow-2xl: 0 24px 64px rgba(13, 27, 62, 0.20);

  /* Sombra con tinte de color de marca */
  --shadow-brand-sm: 0 4px 14px rgba(34, 102, 227, 0.25);
  --shadow-brand-md: 0 8px 28px rgba(34, 102, 227, 0.30);
  --shadow-brand-lg: 0 16px 48px rgba(34, 102, 227, 0.35);

  /* Glow para badges y botones destacados */
  --shadow-glow: 0 0 20px rgba(34, 102, 227, 0.40), 0 4px 16px rgba(34, 102, 227, 0.25);


  /* ----------------------------------------------------------
     TIPOGRAFÍA — ESCALA
  ---------------------------------------------------------- */

  /* Familia tipográfica */
  --font-display:  'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;  /* Headings */
  --font-body:     'Inter', system-ui, -apple-system, sans-serif;        /* Body */
  --font-mono:     'JetBrains Mono', 'Fira Code', monospace;             /* Código */

  /* Escala modular — ratio 1.25 (Major Third) */
  --text-xs:   0.75rem;    /*  12px */
  --text-sm:   0.875rem;   /*  14px */
  --text-base: 1rem;       /*  16px */
  --text-lg:   1.125rem;   /*  18px */
  --text-xl:   1.25rem;    /*  20px */
  --text-2xl:  1.5rem;     /*  24px */
  --text-3xl:  1.875rem;   /*  30px */
  --text-4xl:  2.25rem;    /*  36px */
  --text-5xl:  3rem;       /*  48px */
  --text-6xl:  3.75rem;    /*  60px */
  --text-7xl:  4.5rem;     /*  72px */

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

  /* Interlineado */
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;
  --leading-loose:  1.8;

  /* Espaciado entre letras */
  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.015em;
  --tracking-normal:  0em;
  --tracking-wide:    0.02em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.12em;


  /* ----------------------------------------------------------
     ESPACIADO — Sistema de 4px
  ---------------------------------------------------------- */

  --space-0:    0;
  --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-7:    1.75rem;   /* 28px */
  --space-8:    2rem;      /* 32px */
  --space-10:   2.5rem;    /* 40px */
  --space-12:   3rem;      /* 48px */
  --space-14:   3.5rem;    /* 56px */
  --space-16:   4rem;      /* 64px */
  --space-20:   5rem;      /* 80px */
  --space-24:   6rem;      /* 96px */
  --space-28:   7rem;      /* 112px */
  --space-32:   8rem;      /* 128px */


  /* ----------------------------------------------------------
     LAYOUT — Contenedores y Grid
  ---------------------------------------------------------- */

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

  --container-padding-mobile:  var(--space-5);   /* 20px */
  --container-padding-tablet:  var(--space-8);   /* 32px */
  --container-padding-desktop: var(--space-12);  /* 48px */

  --section-padding-y-sm: var(--space-16);  /* 64px */
  --section-padding-y-md: var(--space-24);  /* 96px */
  --section-padding-y-lg: var(--space-32);  /* 128px */


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

  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-slower: 600ms;

  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --transition-base:    all var(--duration-base) var(--ease-default);
  --transition-fast:    all var(--duration-fast) var(--ease-default);
  --transition-slow:    all var(--duration-slow) var(--ease-default);
  --transition-colors:  color var(--duration-base) var(--ease-default),
                        background-color var(--duration-base) var(--ease-default),
                        border-color var(--duration-base) var(--ease-default);
  --transition-shadow:  box-shadow var(--duration-base) var(--ease-default);
  --transition-transform: transform var(--duration-base) var(--ease-spring);


  /* ----------------------------------------------------------
     Z-INDEX — Capas
  ---------------------------------------------------------- */

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


  /* ----------------------------------------------------------
     COMPONENTES — Navbar
  ---------------------------------------------------------- */

  --navbar-height:          80px;
  --navbar-height-mobile:   64px;
  --navbar-bg:              rgba(255, 255, 255, 0.92);
  --navbar-bg-scrolled:     rgba(255, 255, 255, 0.98);
  --navbar-border:          var(--border-subtle);
  --navbar-shadow-scrolled: var(--shadow-sm);
  --navbar-blur:            blur(12px);


  /* ----------------------------------------------------------
     COMPONENTES — Botones
  ---------------------------------------------------------- */

  --btn-padding-x-sm:  var(--space-4);
  --btn-padding-y-sm:  var(--space-2);
  --btn-padding-x-md:  var(--space-6);
  --btn-padding-y-md:  var(--space-3);
  --btn-padding-x-lg:  var(--space-8);
  --btn-padding-y-lg:  var(--space-4);

  --btn-font-size-sm:  var(--text-sm);
  --btn-font-size-md:  var(--text-base);
  --btn-font-size-lg:  var(--text-lg);
  --btn-font-weight:   var(--font-semibold);
  --btn-radius:        var(--border-radius-md);
  --btn-radius-pill:   var(--border-radius-full);


  /* ----------------------------------------------------------
     COMPONENTES — Cards
  ---------------------------------------------------------- */

  --card-bg:         var(--bg-surface);
  --card-border:     var(--border-subtle);
  --card-radius:     var(--border-radius-xl);
  --card-shadow:     var(--shadow-md);
  --card-shadow-hover: var(--shadow-xl);
  --card-padding:    var(--space-8);
  --card-padding-sm: var(--space-6);


  /* ----------------------------------------------------------
     COMPONENTES — Inputs / Formularios
  ---------------------------------------------------------- */

  --input-bg:         var(--bg-surface);
  --input-bg-focus:   var(--bg-surface);
  --input-border:     var(--border-default);
  --input-border-focus: var(--border-focus);
  --input-radius:     var(--border-radius-md);
  --input-padding-x:  var(--space-4);
  --input-padding-y:  var(--space-3);
  --input-font-size:  var(--text-base);
  --input-shadow-focus: 0 0 0 3px rgba(34, 102, 227, 0.18);


  /* ----------------------------------------------------------
     COMPONENTES — Badges / Pills
  ---------------------------------------------------------- */

  --badge-radius:     var(--border-radius-full);
  --badge-padding-x:  var(--space-3);
  --badge-padding-y:  var(--space-1);
  --badge-font-size:  var(--text-xs);
  --badge-font-weight: var(--font-semibold);

}