/* ==========================================================================
   Grupo Aserpaz — Design tokens
   Sistema de diseño corporativo. Todo el tema consume estas variables:
   cambiar un valor aquí lo propaga a la web entera.
   ========================================================================== */

:root {
  /* ---------- Marca: azul confianza ---------- */
  --az-navy-950: #04101F;
  --az-navy-900: #071B33;
  --az-navy-800: #0B2A4A;
  --az-blue-700: #0F3F73;
  --az-blue-600: #12508C;
  --az-blue-500: #1B6FC4;
  --az-blue-400: #3D8FDC;
  --az-blue-200: #B8D6F2;
  --az-blue-100: #E4EFFA;
  --az-blue-050: #F2F7FC;

  /* ---------- Acento cálido (CTA, iconos, subrayados) ---------- */
  --az-accent-600: #B87614;
  --az-accent-500: #E09B22;
  --az-accent-400: #F0B451;
  --az-accent-100: #FDF3E1;

  /* ---------- Estado ---------- */
  --az-success: #1E8E5A;
  --az-warning: #D98A0B;
  --az-danger: #C2352B;

  /* ---------- Neutros ---------- */
  --az-white: #FFFFFF;
  --az-gray-050: #F7F9FB;
  --az-gray-100: #EDF1F5;
  --az-gray-200: #DCE3EB;
  --az-gray-300: #C3CDD8;
  --az-gray-400: #97A4B3;
  --az-gray-500: #6B7A8C;
  --az-gray-600: #4E5C6B;
  --az-gray-700: #37424E;
  --az-gray-900: #1B222A;

  /* ---------- Roles semánticos ---------- */
  --az-text: var(--az-gray-900);
  --az-text-muted: var(--az-gray-500);
  --az-text-invert: var(--az-white);
  --az-bg: var(--az-white);
  --az-bg-soft: var(--az-blue-050);
  --az-bg-dark: var(--az-navy-900);
  --az-border: var(--az-gray-200);
  --az-link: var(--az-blue-600);
  --az-link-hover: var(--az-blue-700);

  /* ---------- Tipografía ---------- */
  --az-font-head: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
  --az-font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Escala fluida (clamp) — móvil → desktop */
  --az-fs-display: clamp(2.4rem, 1.4rem + 3.6vw, 4.4rem);
  --az-fs-h1: clamp(2rem, 1.3rem + 2.6vw, 3.4rem);
  --az-fs-h2: clamp(1.65rem, 1.2rem + 1.8vw, 2.6rem);
  --az-fs-h3: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
  --az-fs-h4: clamp(1.1rem, 1rem + 0.4vw, 1.25rem);
  --az-fs-lead: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
  --az-fs-body: 1.0625rem;
  --az-fs-sm: 0.9375rem;
  --az-fs-xs: 0.8125rem;

  --az-lh-tight: 1.12;
  --az-lh-snug: 1.28;
  --az-lh-body: 1.68;

  --az-fw-regular: 400;
  --az-fw-medium: 500;
  --az-fw-semibold: 600;
  --az-fw-bold: 700;

  --az-ls-tight: -0.022em;
  --az-ls-wide: 0.14em;

  /* ---------- Espaciado (escala 4px) ---------- */
  --az-space-1: 0.25rem;
  --az-space-2: 0.5rem;
  --az-space-3: 0.75rem;
  --az-space-4: 1rem;
  --az-space-5: 1.5rem;
  --az-space-6: 2rem;
  --az-space-7: 2.5rem;
  --az-space-8: 3rem;
  --az-space-9: 4rem;
  --az-space-10: 5rem;
  --az-space-11: 6.5rem;
  --az-space-12: 8rem;

  /* Padding vertical de sección, fluido */
  --az-section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* ---------- Layout ---------- */
  --az-container: 1200px;
  --az-container-wide: 1440px;
  --az-container-narrow: 760px;
  --az-gutter: clamp(1.25rem, 4vw, 2.5rem);
  --az-header-h: 84px;
  --az-topbar-h: 40px;

  /* ---------- Radios ---------- */
  --az-radius-xs: 4px;
  --az-radius-sm: 8px;
  --az-radius-md: 14px;
  --az-radius-lg: 22px;
  --az-radius-xl: 32px;
  --az-radius-pill: 999px;

  /* ---------- Sombras ---------- */
  --az-shadow-xs: 0 1px 2px rgba(7, 27, 51, 0.06);
  --az-shadow-sm: 0 2px 8px rgba(7, 27, 51, 0.07);
  --az-shadow-md: 0 10px 28px -8px rgba(7, 27, 51, 0.16);
  --az-shadow-lg: 0 24px 56px -16px rgba(7, 27, 51, 0.22);
  --az-shadow-blue: 0 16px 40px -14px rgba(18, 80, 140, 0.45);
  --az-shadow-accent: 0 14px 32px -12px rgba(224, 155, 34, 0.5);

  /* ---------- Degradados ---------- */
  --az-grad-brand: linear-gradient(135deg, var(--az-navy-900) 0%, var(--az-blue-600) 55%, var(--az-blue-500) 100%);
  --az-grad-soft: linear-gradient(180deg, var(--az-blue-050) 0%, var(--az-white) 100%);
  --az-grad-accent: linear-gradient(135deg, var(--az-accent-500) 0%, var(--az-accent-400) 100%);
  --az-grad-line: linear-gradient(90deg, var(--az-accent-500), transparent);

  /* ---------- Movimiento ---------- */
  --az-ease: cubic-bezier(0.22, 0.68, 0, 1);
  --az-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --az-dur-fast: 150ms;
  --az-dur: 260ms;
  --az-dur-slow: 520ms;

  /* ---------- Capas ---------- */
  --az-z-base: 1;
  --az-z-sticky: 100;
  --az-z-header: 200;
  --az-z-drawer: 300;
  --az-z-modal: 400;
}

/* Reducción de movimiento por preferencia del sistema */
@media (prefers-reduced-motion: reduce) {
  :root {
    --az-dur-fast: 0ms;
    --az-dur: 0ms;
    --az-dur-slow: 0ms;
  }
}