/* ============================================================
   WEBIAPRO · Sistema de diseño
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

:root {
  /* Colores principales */
  --bg:              #0F172A;
  --bg-surface:      #1E293B;
  --bg-surface-2:    #334155;
  --accent:          #6366F1;
  --accent-dark:     #4F46E5;
  --accent-light:    #818CF8;
  --accent-glow:     rgba(99, 102, 241, 0.15);

  /* Texto */
  --text:            #F1F5F9;
  --text-secondary:  #94A3B8;
  --text-muted:      #475569;

  /* Bordes */
  --border:          rgba(255,255,255,0.08);
  --border-accent:   rgba(99,102,241,0.3);

  /* Estados */
  --success:         #10B981;
  --error:           #EF4444;

  /* Tipografía */
  --font:            'DM Sans', system-ui, sans-serif;

  --text-xs:         0.75rem;
  --text-sm:         0.875rem;
  --text-base:       1rem;
  --text-lg:         1.125rem;
  --text-xl:         1.25rem;
  --text-2xl:        1.5rem;
  --text-3xl:        1.875rem;
  --text-4xl:        2.5rem;
  --text-5xl:        3.5rem;

  /* Espaciado */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.25rem;
  --s6: 1.5rem;
  --s8: 2rem;
  --s10: 2.5rem;
  --s12: 3rem;
  --s16: 4rem;
  --s20: 5rem;
  --s24: 6rem;

  /* Layout */
  --container: 1140px;
  --container-px: var(--s6);
  --section-py: var(--s20);

  /* Efectos */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-full: 9999px;

  --shadow-sm:    0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.3);
  --shadow-lg:    0 16px 40px rgba(0,0,0,0.4);
  --shadow-glow:  0 0 40px rgba(99,102,241,0.2);

  --transition:   200ms ease;
  --transition-slow: 400ms ease;
}