/* ==========================================================================
   LinkedTIC — Design Tokens (variables.css)
   Design System: Enterprise Gateway · UI/UX Pro Max
   Paleta: Sky Blue Trust + CTA Naranja
   Tipografía: Lexend (headings) + Source Sans 3 (body)
   ========================================================================== */

/* ── Google Fonts ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');

/* ── Base 10px → 1rem = 10px ──────────────────────────────────────────────── */
html {
  font-size: 62.5%; /* 10px base — se usa rem en toda la UI */
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

/* ── Root Tokens ──────────────────────────────────────────────────────────── */
:root {

  /* ── Colores ──────────────────────────────────────────────────────────── */

  /* Fondos */
  --color-bg:               #F0F9FF; /* sky-50  — fondo global */
  --color-surface:          #FFFFFF; /* blanco  — cards, header */
  --color-surface-alt:      #E0F2FE; /* sky-100 — secciones alternas */

  /* Texto */
  --color-text:             #0C4A6E; /* sky-900 — texto principal (contraste ≥ 7:1) */
  --color-muted:            #475569; /* slate-600 — texto secundario / meta */
  --color-text-inverse:     #FFFFFF; /* blanco  — sobre fondos oscuros */

  /* Brand / Primarios */
  --color-primary:          #0EA5E9; /* sky-500 — azul principal */
  --color-primary-dark:     #0369A1; /* sky-700 — hover de primary */
  --color-primary-light:    #38BDF8; /* sky-400 — secondary / acento suave */
  --color-primary-contrast: #FFFFFF; /* texto sobre primary */

  /* CTA */
  --color-cta:              #F97316; /* orange-500 — botón de acción principal */
  --color-cta-dark:         #EA580C; /* orange-600 — hover CTA */
  --color-cta-contrast:     #FFFFFF; /* texto sobre CTA */

  /* Bordes */
  --color-border:           #E2E8F0; /* slate-200 — bordes suaves */
  --color-border-strong:    #BAE6FD; /* sky-200  — bordes con marca */

  /* Focus / Accesibilidad */
  --color-focus:            rgba(14, 165, 233, 0.25); /* halo de foco visible */

  /* Estados de feedback */
  --color-success:          #22C55E; /* green-500 */
  --color-error:            #EF4444; /* red-500 */
  --color-warning:          #F59E0B; /* amber-500 */

  /* ── Tipografía ───────────────────────────────────────────────────────── */

  --font-heading:   'Lexend', system-ui, sans-serif;
  --font-body:      'Source Sans 3', system-ui, sans-serif;

  /* Escala tipográfica (base 10px → en rem) */
  --text-xs:    1.2rem;  /* 12px */
  --text-sm:    1.4rem;  /* 14px */
  --text-base:  1.6rem;  /* 16px — body base */
  --text-md:    1.8rem;  /* 18px */
  --text-lg:    2.0rem;  /* 20px */
  --text-xl:    2.4rem;  /* 24px */
  --text-2xl:   3.0rem;  /* 30px */
  --text-3xl:   3.6rem;  /* 36px */
  --text-4xl:   4.8rem;  /* 48px */
  --text-5xl:   6.0rem;  /* 60px — H1 hero */

  /* Peso tipográfico */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* Interlineado */
  --leading-tight:  1.2;
  --leading-snug:   1.375;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  /* ── Espaciado ────────────────────────────────────────────────────────── */
  /*
     Escala aritmética: 1 unidad = 0.8rem (8px).
     --space-1 = 0.8rem  (8px)
     --space-2 = 1.6rem  (16px)
     --space-3 = 2.4rem  (24px)
     --space-4 = 3.2rem  (32px)
     --space-5 = 4.0rem  (40px)
     --space-6 = 4.8rem  (48px)
     --space-7 = 6.4rem  (64px)
     --space-8 = 9.6rem  (96px)
  */
  --space-1:  0.8rem;
  --space-2:  1.6rem;
  --space-3:  2.4rem;
  --space-4:  3.2rem;
  --space-5:  4.0rem;
  --space-6:  4.8rem;
  --space-7:  6.4rem;
  --space-8:  9.6rem;

  /* Aliases semánticos */
  --space-xs:   var(--space-1);  /* 8px  — gaps internos */
  --space-sm:   var(--space-2);  /* 16px — padding estándar */
  --space-md:   var(--space-3);  /* 24px — padding secciones */
  --space-lg:   var(--space-4);  /* 32px — gaps entre bloques */
  --space-xl:   var(--space-6);  /* 48px — márgenes de sección */
  --space-2xl:  var(--space-7);  /* 64px — hero padding */
  --space-3xl:  var(--space-8);  /* 96px — espaciado entre secciones */

  /* Ancho máximo del contenedor */
  --container-max:  120rem; /* 1200px */
  --container-sm:   76.8rem; /* 768px */

  /* ── Border Radius ────────────────────────────────────────────────────── */
  --radius-sm:    0.4rem;  /* 4px  — inputs pequeños */
  --radius-md:    0.8rem;  /* 8px  — botones, inputs */
  --radius-lg:    1.2rem;  /* 12px — cards */
  --radius-xl:    1.6rem;  /* 16px — modales */
  --radius-2xl:   2.4rem;  /* 24px — hero pill / badge */
  --radius-full:  9999px;  /* píldora */

  /* ── Sombras ──────────────────────────────────────────────────────────── */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:  0 4px 6px  rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 10px 15px rgba(0, 0, 0, 0.10);
  --shadow-xl:  0 20px 25px rgba(0, 0, 0, 0.12);
  --shadow-focus: 0 0 0 3px var(--color-focus);

  /* Sombra de marca (azul) — para hero / tarjetas destacadas */
  --shadow-brand: 0 8px 24px rgba(14, 165, 233, 0.20);

  /* ── Transiciones ─────────────────────────────────────────────────────── */
  --transition-fast:    150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:    250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:    400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z-Index ──────────────────────────────────────────────────────────── */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-fixed:    300;
  --z-modal:    400;
  --z-toast:    500;

  /* ── Animaciones on-scroll (IntersectionObserver) ─────────────────────── */
  --anim-duration:   300ms;
  --anim-easing:     cubic-bezier(0.4, 0, 0.2, 1);
  --anim-distance:   2rem; /* translateY inicial */

}

/* ── Accesibilidad: prefers-reduced-motion ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --anim-duration:  0ms;
    --anim-distance:  0rem;
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
}