/* ============================================================
   SYSTEM.CSS — capa neutra, sin marca
   Esta capa no sabe qué cliente la usa. Define ritmo, escala y
   estructura. El día que exista el ERP para otro cliente, este
   archivo se reutiliza sin tocar una sola línea: solo cambia
   el archivo theme-*.css que se carga después.
   ============================================================ */

:root {
  /* --- Espaciado (escala 4px) --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* --- Radios --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* --- Sombras (neutras, muy sutiles — UX 2026 favorece profundidad mínima) --- */
  --shadow-xs: 0 1px 2px rgba(15, 15, 15, 0.04);
  --shadow-sm: 0 2px 8px rgba(15, 15, 15, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 15, 15, 0.08);
  --shadow-focus: 0 0 0 3px var(--ring-color, rgba(15, 15, 15, 0.18));

  /* --- Tipografía: escala modular 1.2 --- */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 2.75rem;

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;

  /* --- Duración de transición --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 360ms;

  /* --- Layout --- */
  --container-max: 1160px;
  --border-hairline: 1px solid var(--system-border, rgba(15, 15, 15, 0.1));
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* Foco visible siempre — accesibilidad no negociable */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 640px) {
  .container {
    padding-inline: var(--space-4);
  }
}