:root {
  /* 
  ============================
  🎯 PALETA CORPORATIVA ISUIT
  ============================ 
  */

  /* ===== Colores principales ===== */
  --isuit-color-primary-text: #500859;             /* Texto principal (primario) */
  --isuit-color-primary-hover: #5f61e6;            /* Hover de elementos principales */
  --isuit-color-primary-bg: #e7e7ff;               /* Fondo asociado al color primario */
  --isuit-color-primary-border: #c3c4ff;           /* Bordes y labels primarios */
  --isuit-color-primary-border-light: rgba(105, 108, 255, 0.08); /* Borde ligero o fondo suave */
  --isuit-color-primary-shadow: rgba(105, 108, 255, 0.4);         /* Sombra activa o resaltada */
  --isuit-color-primary-alert: #d2d3ff;            /* Borde o fondo de alerta primario */

  /* ===== Colores neutros ===== */
  --color-black: #000000;
  --color-dark: #1a1a1a;
  --color-gray-700: #555555;
  --color-gray-400: #aaaaaa;
  --color-gray-200: #e0e0e0;
  --color-white: #ffffff;

  /* ===== Fondos ===== */
  --background-default: var(--color-white);
  --background-muted: var(--isuit-color-primary-bg);
  --background-active: var(--isuit-color-primary-border-light);

  /* ===== Texto ===== */
  --text-primary: var(--isuit-color-primary-text);
  --text-hover: var(--isuit-color-primary-hover);
  --text-muted: var(--color-gray-700);
  --text-inverse: var(--color-white);

  /* ===== Bordes ===== */
  --border-primary: var(--isuit-color-primary-border);
  --border-light: var(--isuit-color-primary-border-light);
  --border-alert: var(--isuit-color-primary-alert);

  /* ===== Sombras ===== */
  --shadow-primary: 0 2px 6px var(--isuit-color-primary-shadow);
}