:root {
  /* Paleta base */
  --bg: #fafbfc;
  --bg-2: #f8f9fa;
  --txt: #1a1d23;
  --muted: #6c757d;

  /* Marca */
  --brand: #8b5fbf;
  --brand-2: #a855f7;
  --brand-light: #f3f0ff;

  /* Neutrales y estado */
  --card: #ffffff;
  --stroke: #e9ecef;
  --ok: #10b981;

  /* Sombras y gradientes */
  --shadow: 0 4px 20px color-mix(in srgb, var(--brand) 18%, transparent);
  --shadow-hover: 0 8px 30px color-mix(in srgb, var(--brand) 28%, transparent);
  --brand-navy: #101585;
  --brand-violet: #8B5FBF;
  --brand-grad: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  --bg-grad: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  --halo-weak: color-mix(in srgb, var(--brand) 10%, transparent);
  --halo-mid: color-mix(in srgb, var(--brand) 35%, transparent);
  --halo-strong: color-mix(in srgb, var(--brand) 55%, transparent);
}