/* =====================================================
   SISTEMA DE DISEÑO — ASERTIVA CONSULTORES
   Variables CSS globales
   ===================================================== */

/* --------------------------------------------------
   1. PALETA DE COLORES
   -------------------------------------------------- */
:root {
  /* Azul marino */
  --color-primary-900: #0a1628;
  --color-primary-800: #0d1f3c;
  --color-primary-700: #112952;
  --color-primary-600: #163368;
  --color-primary-500: #1a3d7e;   /* Principal */
  --color-primary-400: #2e5499;
  --color-primary-300: #4a70b5;
  --color-primary-200: #7d9dce;
  --color-primary-100: #b8cce6;
  --color-primary-50:  #e8eff8;

  /* Amarillo dorado */
  --color-accent-900: #5c3d00;
  --color-accent-800: #7a5200;
  --color-accent-700: #9e6900;
  --color-accent-600: #c48200;
  --color-accent-500: #e09c00;   /* Principal */
  --color-accent-400: #f0ad14;
  --color-accent-300: #f5c142;
  --color-accent-200: #f9d47a;
  --color-accent-100: #fce9b2;
  --color-accent-50:  #fef8e6;

  /* Neutros */
  --color-neutral-900: #111827;
  --color-neutral-800: #1f2937;
  --color-neutral-700: #374151;
  --color-neutral-600: #4b5563;
  --color-neutral-500: #6b7280;
  --color-neutral-400: #9ca3af;
  --color-neutral-300: #d1d5db;
  --color-neutral-200: #e5e7eb;
  --color-neutral-100: #f3f4f6;
  --color-neutral-50:  #f9fafb;

  /* Semánticos */
  --color-success:  #16a34a;
  --color-warning:  #d97706;
  --color-error:    #dc2626;
  --color-info:     #0284c7;

  /* Asignaciones de uso */
  --color-bg:          #ffffff;
  --color-bg-soft:     var(--color-neutral-50);
  --color-bg-muted:    var(--color-neutral-100);
  --color-text:        var(--color-neutral-900);
  --color-text-muted:  var(--color-neutral-600);
  --color-text-light:  var(--color-neutral-400);
  --color-border:      var(--color-neutral-200);
  --color-link:        var(--color-primary-500);
  --color-link-hover:  var(--color-primary-700);
  --color-heading:     var(--color-primary-800);

  /* Botones */
  --color-btn-primary-bg:    var(--color-primary-500);
  --color-btn-primary-text:  #ffffff;
  --color-btn-primary-hover: var(--color-primary-700);
  --color-btn-accent-bg:     var(--color-accent-500);
  --color-btn-accent-text:   var(--color-primary-900);
  --color-btn-accent-hover:  var(--color-accent-700);
}

/* --------------------------------------------------
   2. TIPOGRAFÍA
   -------------------------------------------------- */
:root {
  /* Familia de fuentes */
  --font-heading:  'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-body:     'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:     'Fira Code', 'Consolas', 'Courier New', monospace;

  /* Escala de tamaños (fluid / rem) */
  --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 */

  /* Pesos */
  --font-weight-light:    300;
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-black:    900;

  /* Interlineado */
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;  /* Párrafos legibles */
  --leading-loose:   2;

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

/* --------------------------------------------------
   3. ESPACIADO
   -------------------------------------------------- */
:root {
  --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 */
}

/* --------------------------------------------------
   4. BORDES Y RADIOS
   -------------------------------------------------- */
:root {
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  --border-width-sm: 1px;
  --border-width-md: 2px;
  --border-width-lg: 4px;
}

/* --------------------------------------------------
   5. SOMBRAS
   -------------------------------------------------- */
:root {
  --shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10);
  --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10);
  --shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --shadow-primary: 0 4px 14px 0 rgb(26 61 126 / 0.30);
  --shadow-accent:  0 4px 14px 0 rgb(224 156 0 / 0.30);
}

/* --------------------------------------------------
   6. TRANSICIONES
   -------------------------------------------------- */
:root {
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;
}

/* --------------------------------------------------
   7. BREAKPOINTS (referencia — usar en media queries)
   --breakpoint-sm:  640px
   --breakpoint-md:  768px
   --breakpoint-lg:  1024px
   --breakpoint-xl:  1280px
   --breakpoint-2xl: 1536px
   -------------------------------------------------- */

/* --------------------------------------------------
   8. APLICACIÓN BASE
   -------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family:  var(--font-body);
  font-size:    var(--text-base);
  font-weight:  var(--font-weight-normal);
  line-height:  var(--leading-relaxed);
  color:        var(--color-text);
  background:   var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Títulos */
h1, h2, h3, h4, h5, h6 {
  font-family:   var(--font-heading);
  font-weight:   var(--font-weight-bold);
  line-height:   var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color:         var(--color-heading);
  margin-top:    0;
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl);  }
h6 { font-size: var(--text-lg);  }

/* Párrafos — interlineado mejorado */
p {
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
  max-width: 70ch;
}

/* Enlace */
a {
  color:           var(--color-link);
  text-decoration: none;
  transition:      color var(--transition-fast);
}
a:hover {
  color:           var(--color-link-hover);
  text-decoration: underline;
}

/* Texto pequeño / muted */
small, .text-muted {
  font-size: var(--text-sm);
  color:     var(--color-text-muted);
}