/* =========================================
   VARIABLES DE DISEÑO (SISTEMA)
========================================= */

:root {
  /* Colores */
  --color-bg: #ffffff;
  --color-text: #101914;
  --color-text-soft: #4d5f56;
  --color-text-muted: #6e7d74;

  --color-primary: #178a57;
  --color-primary-hover: #116c44;
  --color-primary-light: #e8f7ef;

  --color-border: rgba(16, 25, 20, 0.08);

  /* Sombras */
  --shadow-sm: 0 8px 22px rgba(16, 25, 20, 0.05);
  --shadow-md: 0 16px 40px rgba(16, 25, 20, 0.08);
  --shadow-lg: 0 24px 60px rgba(16, 25, 20, 0.12);

  /* Bordes */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* Layout */
  --max-width: 1200px;

  /* Transiciones */
  --transition: 0.25s ease;
}